jQuery - check for empty TDs and if all empty hide the parent TR

Question

I\'d like to check for empty TDs (classes a-h only) and if all are empty, then I\'d like to hide the parent TR. The issues I\'m running into are, my empty TDs contain \" \"

Answer 1

This is what you are looking for:

$(function(){
    $('tr').each(function(){
        var _hide = true;
        $(this).find('td:not(.requirementRight)').each(function(){
            if($(this).text().trim() != ''){
                _hide = false;
            }
        });

        if(_hide){
            $(this).hide();
        }
    });
})

You check every row for content other than whitespace and hide the row if none was found. have fun! working example: http://jsfiddle.net/kvCXa/7/

Answer 2

$('tr').each(function(){
  var emptyTdArray=$(this).find('td:not(:.requirementRight,:empty)').filter(function() {     
  return $(this).html()!= " ";  
  });

  if(emptyTdArray.length==0)
  {
     $(this).hide();
  }
});

Answer 3

firstly, I'd suggest giving the TDs an additional class to distinguish the TDs whose contents are to be checked. below, I used .et (emptyTest).

the following syntax might be slightly wrong, but it should give you the idea:

$("tr").each(function() {
  var nonEmpty = $(this).find("td.et").filter(function() {
    return $(this).text().trim() != ""; //check the trimmed TD content - will make it ignore all white space
  });
  if (nonEmpty.length == 0) $(this).hide();
});

Answer 4

Why not leave out the non-breaking spaces? I'm guessing they are there for styling purposes on empty TDs?

If so you can use this CSS to solve that issue:

table
{
    empty-cells: show;
}

Corrected CSS.

Answer 5

"If Empty" is not clear, since in your example, they are filled with "nbsp". This is the reason why I made a function called isEmpty() so you can define your custom rules in there. Since you didn't want requirementRight, I put td:not(.requirementRight). This is not the correct way to do it.

The correct way to do it, would be to put a second class on a-h, such as

<tr>
    <td class="requirementRight">Requirement</td>
    <td class="checkempty a">&nbsp;</td>
    <td class="checkempty b">&nbsp;</td>
    <td class="checkempty c">&nbsp;</td>
    <td class="checkempty d">&nbsp;</td>
    <td class="checkempty e">&nbsp;</td>
    <td class="checkempty f">NOT EMPTY</td>
    <td class="checkempty g">&nbsp;</td>
    <td class="checkempty h">&nbsp;</td>
  </tr>

So we can call tr.find(tr.checkempty)..

Anyway, here's the code!

$("tr").each(function() {
  var trIsEmpty = true;
  var tr = $(this);

    tr.find("td:not(.requirementRight)").each(function() {
      td = $(this);

        if (isEmpty(td) === false)  {
         trIsEmpty = false;   
        }
    });

    if (trIsEmpty == true) {
         tr.hide();                       
    }
});

    function isEmpty(td) {
        if (td.text == '' || td.text() == ' ' || td.html() == ' ' || td.is(":not(:visible)")) {
            return true;
        }            

        return false;
    }
​

Working Example: http://jsfiddle.net/FeQ7h/7/