Question

我有这个css样式，并想知道我需要更改什么才能折叠/隐藏空表的html表。

风格：

<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>

我的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>

我希望如此，如果我的事件表没有结果，则表格不显示（搜索结果之间没有空格，其中事件结果应该是因为border = 0）。你能隐藏整个桌子吗？

Answer 1

为什么不将整个表包装在PHP if语句中，然后使用它来检查数据并显示表格？

Answer 2

如果您希望保持客户端HTML没有服务器端标记并帮助保持内容和行为100％分离，您可以使用JQuery隐藏没有找到行元素的任何表：

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

Answer 3

最好的方法是使用像PHP这样的服务器端语言，根据SQL查询生成所需的表。这将使代码更短，更有效。

Answer 4

如果你想使用css和现有代码实现这一点，你可以创建一个名为hidden_table的新css类，并将display设置为none：

.hidden_table {
    display: none;
}

然后在您的输出中，您可以确定是否将表的css类编写为标准类（如果有行），或者您可以为表提供“hidden_table”类，这将隐藏整个表。

隐藏没有要显示的数据的表

4 个答案: