Question

我的程序生成表格，其中一些有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，有没有办法显示表格？（如第三张表所示）

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

Answer 2

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

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

Answer 3

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

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

Answer 4

您可以使用jQuery.filter函数找到所有空tbody的表，并隐藏它们：

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

Answer 5

您可以使用.has()功能执行此操作。

首先隐藏所有表格：

$("table").hide();

然后只显示那些tbody：

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

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

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

JSFiddle demo

Answer 6

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

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

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

当tbody缺失时隐藏表

6 个答案: