Hide complete column if data is null or empty using jquery

Question

I would like to hide the complete column including the heading if data is empty or null. I tried to do this with jquery, but iam not able to accomplish what iam trying. Basically iam getting some records in PHP. Some columns doesnt have data, so i dont need to show the empty data or data which is NULL. Can anyone guide me on whats the mistake iam making.

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

You're hiding the entire row if there is any empty cell in it. — Barmar
– Barmar, Commented Mar 17, 2016 at 9:07
Iam not well versed with jquery. so you mean to tell i need to give names to each td's? — Sanju Menon
– Sanju Menon, Commented Mar 17, 2016 at 9:07
I mean you can't use a variable like $td until after you assign a value to it. — Barmar
– Barmar, Commented Mar 17, 2016 at 9:08

Barmar · Accepted Answer · 2016-03-17 09:23:38Z

4

Your selector finds any empty cell in the table, and then it hides the entire row that contains it, since the parent of a td is the tr. You need to loop through the columns, and test whether all the cells in that column are empty. Then hide all the cells in that column.

$(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>

answered Mar 17, 2016 at 9:23

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sanju Menon Over a year ago

Thanx. Its working fine. Got a small clarification. Is the selector finds only empty cells or it can find NULL also?

Barmar Over a year ago

.text() always returns a string. If the cell is empty, it returns ''.

Barmar Over a year ago

There's no such thing as NULL data in HTML.

Collectives™ on Stack Overflow

Hide complete column if data is null or empty using jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related