如果没有tr，请隐藏表格

Question

我正在输出这个表：

<table class="table-example">
  <thead>
    <tr>
      <th scope="col">Location</th>
      <th scope="col">Description</th>
      <th scope="col">Status</th>
      <th scope="col">Eta Fix</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

如果tbody如上所述，我需要整个表不显示

尝试使用此变体：

$(function(){
  if ($('.table-example > tbody').length == 0){
    $('.table-example).hide();
  }
});

我究竟做错了什么？

Answer 1

可以使用:has选择器或方法以及:empty选择器

 $('.table-example').has('tbody:empty').hide() 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table-example"> <thead> <tr> <th scope="col">Location</th> <th scope="col">Description</th> <th scope="col">Status</th> <th scope="col">Eta Fix</th> </tr> </thead> <tbody></tbody> </table> 

Answer 2

尝试这个：

 $(function(){ if ($(".table-example > tbody > tr").length == null || $(".table-example > tbody > tr").length == 0){ $(".table-example").hide(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table-example"> <thead> <tr> <th scope="col">Location</th> <th scope="col">Description</th> <th scope="col">Status</th> <th scope="col">Eta Fix</th> </tr> </thead> <tbody></tbody> </table> 

Answer 3

$(function () {

  if ($('.table-example > tbody > tr').length == 0){
    $('.table-example').hide();
  }

});

你可以使用.table-example > tbody > tr而你缺少' $('.table-example').hide(); 。 我希望它对你有用。

Answer 4

如果表中有tbody标记，则选择器$（'。table-example> tbody'）将返回长度为1。 相反，你需要检查tbody中的任何元素：

$(function(){
  if ($('.table-example tbody *').length == 0){
    $('.table-example).hide();
  }
});