CODEWITHSUNDEEP
jqueryhtmlcss
user1040259
user1040259

Reputation: 6509

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

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 " " I'm not sure how to test for those?

http://jsfiddle.net/FeQ7h/1/

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

​

if ( $('td.a:empty, td.b:empty, td.c:empty, td.d:empty, td.e:empty, td.f:empty, td.g:empty, td.h:empty') ) {
   // hide the parent tr
} ​

Upvotes: 12

Views: 21850

Answers (5)

Maktouch
Maktouch

Reputation: 3247

"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() == '&nbsp;' || td.is(":not(:visible)")) {
            return true;
        }            

        return false;
    }
​

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

Upvotes: 5

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

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

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

Upvotes: 1

Jen-Ya
Jen-Ya

Reputation: 318

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/

Upvotes: 4

logical Chimp
logical Chimp

Reputation: 1014

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();
});

Upvotes: 4

Kevin Boucher
Kevin Boucher

Reputation: 16675

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.

Upvotes: 1

Related Questions