Raggruppare risultati di due tabelle

[netkingZ]

Salve a tutti questo è il codice che ho sviluppato:

<script>
$(document).ready(function(){
	
	$(".containerTeam").hide();
	
	
	$("h2.trigger01").css("cursor","pointer").click(function(){
		$(this).next(".containerTeam").slideToggle("slow");
	});

});


</script>

$thread_qry1 = "SELECT * FROM `xt_teams` AS u, `xt_player` AS m WHERE (u.name_team = m.team_name AND m.accepts = 1) ORDER BY u.console_team";

      $row1 = XenForo_Application::get('db')->fetchAll($thread_qry1);

      $teamCurrent = '';
  	$i = 1;
	$count = 1;
        $size = count($row1);
     
                        	 
        foreach ( $row1 AS $rows1 ) {  	
       	
                  if ($teamCurrent != $rows1['name_team'])
    			   {
    				$ii = $i++;
    				if($teamCurrent != '') echo ('</div>');
    				echo ('<h2 class="trigger01">
    						<div style="height:100px; width:100%; background-color:red"></div>
	  	                         </h2>
                                         <div class="containerTeam">
    							  	
    						<div style="height:50px; width:100%; background-color:green"></div>
	                        	  	
    					');

       				 $teamCurrent = $rows1['name_team'];
    				}
    				
    				 echo ('
    					        <div style="height:50px; width:100%; background-color:yellow"></div>
    							   ');
      							
      				 if($count == $size)
        				        echo ('</div>');
     				     $count ++;
     			
          }

Con tutto questo codice ottengo esattamente ciò che voglio , cioè che per ogni div ROSSO e che sono quando clicco sul div ROSSO vengano mostrati i div Verde e GIALLO , e i dati come potete notare derivano da due tabelle differenti che hanno in comune il name_team = team_name.

Mantenendo il codice qui sopra scritto vorrei creare per ogni div ROSSO delle categorie che li raggruppino.
Immaginate di avere una serie di libri ( i div ROSSI che contiene il div VERDE e quello GIALLO ) e che vogliate dividerli per genere , quindi raggruppando tutti i libri horror per esempio insieme , tutti i libri di avventura insieme e cosi via.

ESEMPIO VISIVO:

-- CATEGORIA: HORROR: [B]<-- ELEMENTO MANCANTE NEL CODICE SOPRA[/B]
   ---- LIBRO UNO (DIV ROSSO ) composto da :
      ----- DIV VERDE 
      ----- DIV GIALLO

   ---- LIBRO DUE (DIV ROSSO ) composto da :
      ----- DIV VERDE 
      ----- DIV GIALLO

-- CATEGORIA: AVVENTURA: [B]<-- ELEMENTO MANCANTE NEL CODICE SOPRA[/B]
   ---- LIBRO TRE (DIV ROSSO ) composto da :
      ----- DIV VERDE 
      ----- DIV GIALLO

   ---- LIBRO QUATTRO (DIV ROSSO ) composto da :
      ----- DIV VERDE 
      ----- DIV GIALLO

Scusate non so se mi sono fatto capire ... cmq come posso realizzare ciò che mi serve?

Grazie per la cortese attenzione

 

[netkingZ]

Risolto cosi:

$thread_qry1 = "SELECT * FROM `xt_teams` AS u, `xt_player` AS m WHERE (u.name_team = m.team_name AND m.accepts = 1) ORDER BY u.console_team";

$row1 = XenForo_Application::get('db')->fetchAll($thread_qry1);

$thread_qry12 = "SELECT * FROM `xt_console`"; // numero reale delle categorie

$row12 = XenForo_Application::get('db')->fetchAll($thread_qry12);

$teamCurrent = '';
$i = 1;
$count = 1;
$size = count($row1);

$category = '';
$i12 = 1;
$count12 = 1;
$size12 = count($row12);


foreach ( $row1 AS $rows1 ) {



if($category != $rows1['console_team']){ $ii12 = $i12++;
if($category != '') echo ('</div>');
echo ('<div style="height:auto; width:100% ; margin-bottom:20px">'.$rows1['console_team'].'');


} 

if ($teamCurrent != $rows1['name_team'])
{
$ii = $i++;
if($teamCurrent != '') echo ('</div>');
echo ('<h2 class="trigger01">
<div style="height:100px; width:100%; background-color:red"></div>
</h2>
<div class="containerTeam">

<div style="height:50px; width:100%; background-color:green"></div>

');

$teamCurrent = $rows1['name_team'];
}

echo ('
<div style="height:50px; width:100%; background-color:yellow"></div>
');

if($count == $size)
echo ('</div>');
$count ++;

$category = $rows1['console_team'];

if($count12 == $size12)
echo ('</div>');
$count12 ++;


} 
echo ('</div>');