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选择器

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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＆gt; tbody'）将返回长度为1。相反，你需要检查tbody中的任何元素：

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

如果没有tr，请隐藏表格

4 个答案: