Verstecke Tabellen, die keine Daten zur Anzeige haben

Question

Ich habe diese CSS-Styling und fragte mich, was ich ändern muss, um HTML-Tabellen, die leer sind zu reduzieren/ausblenden.

Der Stil:

<style> 
#search_settings 
{ 
    position:relative; 
    height:25px; 
    width:500px;  
} 

#users_table_results 
{ 
    border-collapse:separate; 
    empty-cells:hide; 
} 

#events_table_results 
{ 
    border-collapse:separate; 
    empty-cells:hide; 
} 

#establishments_table_results 
{ 
    border-collapse:separate; 
    empty-cells:hide; 
} 
</style> 

Mein HTML:

<div id="search_settings"> 
<table width="500" border="0"> 
    <tr> 
    <td height="20" class="heading_text_18">Search results</td> 
    </tr> 
</table> 
<table id="users_table_results" max-width="500" name="users" border="0"> 
    <tr> 
    <td width="50" height="50"><a href="#profile.php"><img src="Images/<?php echo $row_result_users['picture_thumb_url']; ?>" 
    border="0" height="50" width="50"/></a></td> 
    <td width="150" class="ordinary_text_12"><?php echo $row_result_users['user_first_name']; ?></td> 
    <td width="150" class="ordinary_text_12"><?php echo $row_result_users['user_last_name']; ?></td> 
    <td width="150" class="ordinary_text_12"><?php echo $row_result_users['username']; ?></td> 
    </tr> 
</table> 
<table id="events_table_results" width="500" name="events" border="0"> 
    <tr> 
    <td width="50" height="50"><a href="#profile.php"><img src="Images/<?php echo $row_event['event_thumb_url']; ?>" 
    border="0" height="50" width="50"/></a></td> 
    <td width="150" class="ordinary_text_12"><?php echo $row_event['event_name']; ?></td> 
    <td width="150" class="ordinary_text_12"><?php echo $row_event['event_venue']; ?></td> 
    <td width="150" class="ordinary_text_12"><?php echo $row_event['event_date']; ?></td> 
    </tr> 
</table> 
<table id="establishments_table_results" width="500" name="establishments" border="0"> 
    <tr> 
    <td width="50" height="50"><a href="#profile.php"><img src="Establishment_Images/<?php echo $row_establishment['establishment_thumb_url']; ?>" 
    border="0" height="50" width="50"/></a></td> 
    <td width="150" class="ordinary_text_12"><?php echo $row_establishment['establishment_name']; ?></td> 
    <td width="150" class="ordinary_text_12"><?php echo $row_establishment['location_name']; ?></td> 
    <td width="150" class="ordinary_text_12"><?php echo $row_establishment['establishment_pricing']; ?></td> 
    </tr> 
</table>      
</div> 

Ich würde es so will, dass wenn es keine Ergebnisse für meine Ereignistabelle ist, wird die Tabelle zeigt nicht (es gibt keine leere Leerzeichen zwischen den Suchergebnissen, wo die Ereignisergebnisse liegen sollten, da border = 0). Können Sie ganze Tabellen ausblenden?

Answer 1

Die beste Methode ist, eine serverseitige Sprache wie PHP zu verwenden, um die erforderliche Tabelle basierend auf der SQL-Abfrage zu generieren. Dies wird zu einem kürzeren und effektiveren Code führen.

Answer 2

Warum nicht die gesamte Tabelle in eine PHP if-Anweisung umbrechen und diese dann verwenden, um nach Daten zu suchen und die Tabelle anzuzeigen oder nicht?

Answer 3

Wenn Sie Ihren Client-Seite HTML frei von Server-Seite Markup halten wollte und helfen Inhalt und Verhalten 100% getrennt halten, könnten Sie JQuery verwenden, um alle Tabellen zu verstecken, für die es werden keine Zeilenelemente gefunden:

$(document).ready(function() { 
    $('table').each(function() { 
     if($(this).find('tr').length == 0) { 
      $(this).hide(); 
     } 
    }); 
}); 

Letzte Frage

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Verwandte Themen

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.