Question

目前我正在使用百里香作为观点。如果我的所有表标签都为空或空，我试图隐藏我的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为null，如何编写javascript，css或Jquery隐藏此div？基本上这将显示带有标题的表。但是如果标签为空，它应该只是一个空白页面。显示标签内的任何内容。

Answer 1

尽管这里的所有答案都可能有效，但它们都是紧密耦合的（一个简单的html更改最像是阻止javascript代码按预期工作）而不是可重用的。我建议阅读Decoupling Your HTML, CSS, and JavaScript - Philip Walton @ Google Engineer。

如果我写这篇文章，它可能看起来有点像：

<div id= "myTable1div" class="js-hide-onallempty">
  <table id="Table1">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td class="js-hide-onallempty-data">${data.host}</td>
      <td class="js-hide-onallempty-data">${data.id}</td> 
      <td class="js-hide-onallempty-data">${data.number}</td>
    </tr>
  </table>
</div>

jQuery的：

$(document).ready(function(){
  $(".js-hide-onallempty").each(function(){
    var $hide = $(this);
    var isHidden = true;
    $hide.find('.js-hide-onallempty-data').each(function(){
      isHidden = $(this).text().trim().length == 0;
      return isHidden;  // if any element has text then this return false
                        // and breaks the loop
    });
    $hide.toggle(isHidden);
  });
});

Answer 2

我看到你正在打印变量$ {data.host}。为什么不检查$ {data.host}是否为空。如果是这样，请不要显示表格。

在jQuery中，这可以作为

完成

if(typeof data.host === undefined || data.host === '' || data.host === null) 
    $("#Table1").hide();
else
    // display the table with the data

在vanilla js中，它可以像这样完成

if(typeof data.host === undefined || data.host === '' || data.host === null) 
    $(document.querySelector("#Table1")).style.display = "none";
else
    // display the table with the data

如果表标记为空或null，如何隐藏整个<div>？

2 个答案: