隐藏表格，当 tbody 丢失时答案

【问题标题】：Hide table, when tbody missing隐藏表格，当 tbody 丢失时
【发布时间】：2018-07-22 01:19:15
【问题描述】：

我的程序生成表格，有些带有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>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

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

如果tbody 丢失，有什么方法可以不显示表格？（如第三张表）

【问题讨论】：

不可靠，因为如果<tbody> 被省略，大多数浏览器会插入它（尽管<tbody> 是可选元素）；这意味着您必须使用正则表达式解析 HTML：并且您应该（可能）never parse HTML with regex。但更仔细地观察您的问题，您似乎是指“...如果tbody 是empty”而不是“缺失”？

标签： javascript jquery css html-table

【解决方案1】：

可以尝试浏览所有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>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

【讨论】：

【解决方案2】：

试试这个。如果 tbody 有子元素，则检查每个表。

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

【讨论】：

【解决方案3】：

你可以试试看tbody是否为空

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

您可以使用.has() 函数来做到这一点。

先隐藏所有表格：

$("table").hide();

然后仅显示具有tbody 的那些：

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

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

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

JSFiddle demo

【讨论】：

【解决方案6】：

如果只使用 html 和 css 并且您不想显示未填充的表格，只需从您的 html 代码中删除第三个表格或将其添加到您的第三个表格中

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

编辑：如果你使用的是 PHP 的 Javascript，JSTL 你可以修改你的视图来隐藏表格

【讨论】：