Question

如果数据为空或空，我想隐藏包括标题的完整列。我试着用jquery做这个，但是我无法完成我尝试的东西。基本上我在PHP中获得一些记录。有些列没有数据，所以我不需要显示空数据或NULL数据。任何人都可以指导我做出的错误。

<html>

<head>
<title>Hide</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
</head>

<body>

<table border="1" width="100%" id="mytable">
   <thead>
   <tr>
   <th>Head1</th>
   <th>Head2</th>
   <th>Head3</th>
   </thead>
   </tr>

<tr>
<td>aa</td>
<td></td>
<td>cc</td>
</tr>
<tr>
<td>aa</td>
<td></td>
<td>cc</td>
</tr>
<tr>
<td>aa</td>
<td></td>
<td>cc</td>
</tr>
</table>

</body>

</html>
<script type='text/javascript'>
$(window).load(function(){
$('#mytable > tbody  > tr td:empty').parent().hide()
if($td.text() == ''){
    $(this).hide();
    }
});

});

</script>

Answer 1

您的选择器会在表中找到任何空单元格，然后它会隐藏包含它的整个行，因为td的父级是tr。您需要遍历列，并测试该列中的所有单元格是否为空。然后隐藏该列中的所有单元格。

$(document).ready(function() {
  var columns = $("#mytable > tbody > tr:first > td").length;
  for (var i = 0; i < columns; i++) {
    if ($("#mytable > tbody > tr > td:nth-child(" + i + ")").filter(function() {
      return $(this).text() != '';
    }).length == 0) {
      $("#mytable > tbody > tr > td:nth-child(" + i + "), #mytable > thead > tr > th:nth-child(" + i + ")").hide();
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" width="100%" id="mytable">
  <thead>
    <tr>
      <th>Head1</th>
      <th>Head2</th>
      <th>Head3</th>
    </tr>
  </thead>


  <tr>
    <td>aa</td>
    <td></td>
    <td>cc</td>
  </tr>
  <tr>
    <td>aa</td>
    <td></td>
    <td>cc</td>
  </tr>
  <tr>
    <td>aa</td>
    <td></td>
    <td>cc</td>
  </tr>
</table>

如果数据为空或使用jquery为空，则隐藏完整列

1 个答案: