隐藏 table，当 tbody 丢失时

Question

我的程序生成 tables，一些带有 tbody，一些没有 tbody:

table {
  border: 1px solid black;
  margin: 0 0 20px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>0</td>
    </tr>
    <tr>
      <td>February</td>
      <td></td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>0</td>
    </tr>
    <tr>
      <td>February</td>
      <td></td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

有什么方法可以在缺少 tbody 的情况下不显示 table？（如第三个table）

Answer 1

可以尝试浏览所有 table 并检查 table 的 tbody 是否为空：

$("table").each(function(i,v){
   if($(this).find("tbody").html().trim().length === 0){
       $(this).hide()
   }
})

table {
  border: 1px solid black;
  margin: 0 0 20px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>0</td>
    </tr>
    <tr>
      <td>February</td>
      <td></td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>0</td>
    </tr>
    <tr>
      <td>February</td>
      <td></td>
    </tr>
  </tbody>
</table>
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Answer 2

如果仅使用 html 和 css 并且您不想显示未填充的 table，只需从 [=18= 中删除第三个 table ] 代码或将此添加到您的第三个 table

<table style="display:none">
...
</table>

编辑： 如果您使用的是 Php 的 Javascript，JSTL 您可以修改视图以隐藏 tables

Answer 3

试试这个。检查每个 table 是否 tbody 有子元素。

$("table").each(function(){
   if($(this + "tbody").children().length == 0){
       $(this).parent().hide();
   }
})

Answer 4

您可以尝试检查tbody是否为空

$("table").each(function(i,v){
   if($(this).find("tbody").children().length){
       $(this).parent().hide();
   }
})

Answer 5

您可以使用 jQuery.filter 函数定位所有 tbody 为空的表并隐藏它们：

$("table").filter(function(){
    return $(this).find("tbody > *").length === 0;
}).hide();

Answer 6

您可以使用 .has() 函数执行此操作。

首先隐藏所有表格：

$("table").hide();

然后只显示 tbody:

$("table").has("tbody").show();

或者如果 tbody 有单元格（非空）：

$("table").has("tbody td").show();

JSFiddle demo

隐藏 table，当 tbody 丢失时

Hide table, when tbody missing

javascript

css

jquery

html-table