Hide table row if td is empty-CodePudding

I want to hide tr with class cell if td with class emp is empty. How to do it using jquery/javascript?

Html

<table  id="tblNodes">
   <thead>
      <tr >
         <th >Date</th>
         <th >Employee</th>
      </tr>
   </thead>
   <tbody>
      <tr >
         <td >2022-04-02</td>
         <td >
         </td>
      </tr>

      <tr >
         <td >2022-04-07</td>
         <td >
            <ul style="margin-bottom: 1px ">
               <li>Employee 1</li>
            </ul>
         </td>
      </tr>

      <tr >
         <td >2022-04-09</td>
         <td >
         </td>
      </tr>

      <tr >
         <td >2022-04-13</td>
         <td >
            <ul style="margin-bottom: 1px ">
               <li>Employee 1</li>
            </ul>
         </td>
      </tr>

      <tr >
         <td >2022-04-16</td>
         <td >
         </td>
      </tr>

   </tbody>
</table>

I've tried something like code bellow, but still not working.

Jquery

$('#tblNodes > tbody  > tr').each(function () {
   if ($(this).find('td').is(':empty')) {
      $(this).hide();
   }
});

CodePudding user response：

We can iterate over each cell and check its text value. Then we hide its parent if the text is empty. We need to use trim() because jquery returns empty spaces and new lines sometimes for empty elements.

$('#tblNodes td').each(function () {
   if ($(this).text().trim() === '') {
     $(this).parent().hide();
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table  id="tblNodes">
   <thead>
      <tr >
         <th >Date</th>
         <th >Employee</th>
      </tr>
   </thead>
   <tbody>
      <tr >
         <td >2022-04-02</td>
         <td >
         </td>
      </tr>

      <tr >
         <td >2022-04-07</td>
         <td >
            <ul style="margin-bottom: 1px ">
               <li>Employee 1</li>
            </ul>
         </td>
      </tr>

      <tr >
         <td >2022-04-09</td>
         <td >
         </td>
      </tr>

      <tr >
         <td >2022-04-13</td>
         <td >
            <ul style="margin-bottom: 1px ">
               <li>Employee 1</li>
            </ul>
         </td>
      </tr>

      <tr >
         <td >2022-04-16</td>
         <td >
         </td>
      </tr>

   </tbody>
</table>

CodePudding user response：

What causes your code to not work are 2 things

first, you need to each directly through td instead of tr

secondly, i noticed from your code that you have a lot of white spaces here which will fail :empty test

$('#tblNodes > tbody td').each(function () {
   if ($(this).hasClass('emp') && $(this).is(':empty')) {
      $(this).parent().hide();
   }
});

CodePudding user response：

Try This:

$('#tblNodes > tbody td').each(function() {
    if ($(this).html().trim() == '') {
        $(this).parent().hide();
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table  id="tblNodes">
   <thead>
      <tr >
         <th >Date</th>
         <th >Employee</th>
      </tr>
   </thead>
   <tbody>
      <tr >
         <td >2022-04-02</td>
         <td >
         </td>
      </tr>
      <tr >
         <td >2022-04-07</td>
         <td >
            <ul style="margin-bottom: 1px ">
               <li>Employee 1</li>
            </ul>
         </td>
      </tr>
      <tr >
         <td >2022-04-09</td>
         <td >
         </td>
      </tr>
      <tr >
         <td >2022-04-13</td>
         <td >
            <ul style="margin-bottom: 1px ">
               <li>Employee 1</li>
            </ul>
         </td>
      </tr>
      <tr >
         <td >2022-04-16</td>
         <td >
         </td>
      </tr>
   </tbody>
</table>