如果为空(可脚),则隐藏 HTML/JQuery 表


Hide HTML/JQuery table if empty (footable)

下面是我网站的源代码,它显示了一个由没有数据填充的 PHP 文件生成的空表,如果表为空,我如何隐藏这些表并从页面中删除代码。

<form class="cart" method="post" enctype='multipart/form-data'>
<table class="footable" cellspacing="0" class="group_table">
    <thead>
<tr id="price-table-custom-header">
        <th><center>head1</center></th>
        <th><center>Information</center></th>
        <th data-sort-initial="true"><center>head3</center></th>
        <th><center>Purchase</center></th>
</tr>
    </thead>  
<tbody> </tbody>
<tfoot class="hide-if-no-paging">
<tr>
<td colspan="4">
<div class="pagination pagination-centered">
<ul></ul>
</div>
</td>
</tr>
</tfoot>
</table>

您可以验证 tbody 标记是否为空,如果是,则隐藏整个表。

$(document).ready(function(){
   if ($.trim($(".group_table tbody").text()).length == 0) {
     $('.group_table').hide();
   }                                           
});

编辑:

您的表有两个类属性,要添加两个类,您应该这样做:

<table cellspacing="0" class="group_table footable">

Js 小提琴:

https://jsfiddle.net/jsb3z0y4/

为什么不检查它是否有任何内容,如果没有内容,则隐藏它。

var hasContent = $('.group_table tbody').text().trim();
if(!hasContent){
    $('.group_table tbody').hide();
}