javascript - 如果表 标签为空或 null，如何隐藏整个 ？

Question

目前我正在使用 thymeleaf 作为 View 。如果我的所有表格标签都为空或为空，我试图隐藏我的 div。如果它不为空，则显示将显示表格的 div。

简单的 Html :

<div id= "myTable1div">
   <h3> Test table </h3>

   <table id="Table1">
     <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
      </tr>
     </thead>
     <tbody>
       <tr th:each="data, iterStat : ${hostlist}">
         <td th:text = "${data.host}"></td>
         <td th:text = "${data.id}"></td> 
         <td th:text = "${data.number}"></td>
       </tr>
     </tbody>
   </table>
</div>

如果 td 为空，我如何编写 javascript、css 或 Jquery 隐藏此 div？基本上这会显示一个带有标题的表格。但如果标签为空，它应该只是一个空白页。不显示标签内的任何内容。

Answer 1

您可以使用 each() 方法然后使用 hide() 隐藏 div :

$(function(){
   var hide = true;

   $('#Table1 td').each(function(){
        var td_content = $(this).text();

        if(td_content!=""){
            hide = false;
        }
   })

   if(hide){
      $('#myTable1div').hide();
   }
})

希望这对您有所帮助。

两个空 td 的情况:

$(function(){
  var hide = true;

  $('#Table1 td').each(function(){
    var td_content = $(this).text();

    if(td_content!=""){
      hide = false;
    }
  })

  if(hide){
    $('#myTable1div').hide();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myTable1div">
  <table id="Table1">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td></td>
      <td></td> 
      <td>number</td>
    </tr>
  </table>
</div>

所有 td 都是空的:

$(function(){
  var hide = true;

  $('#Table1 td').each(function(){
    var td_content = $(this).text();

    if(td_content!=""){
      hide = false;
    }
  })

  if(hide){
    $('#myTable1div').hide();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myTable1div">
  <table id="Table1">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td></td>
      <td></td> 
      <td></td>
    </tr>
  </table>
</div>