I have table that is filled with dynamic content from a query from a database on the backend. I want to hide any tr that contains only zeros.

Here is what my table looks like:

<table id="table1" " cellspacing="0" style="width: 800px">
<thead id="tablehead">
</thead>
<tbody id="tabledata">
<tr class="odd">
<td>0</td>
<td>0</td>
<td>0</td>
<td>0.00%</td>
<td>0.00%</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
</tr>
</tbody>

Now if the first three td's in tbody are == 0 then I would like to add a class to the tr that will effectively hide that row. How would I go about doing this using jQuery?

EDIT: Sorry forgot to add what I have tried. The following is a test script I tried to see if I could collect all the td's

$(document).ready(function() {
    $("#table1 td").filter(function() {
        return $(this).text == 0;
    }).css("text-color", "red");

    });

I have table that is filled with dynamic content from a query from a database on the backend. I want to hide any tr that contains only zeros.

Here is what my table looks like:

<table id="table1" " cellspacing="0" style="width: 800px">
<thead id="tablehead">
</thead>
<tbody id="tabledata">
<tr class="odd">
<td>0</td>
<td>0</td>
<td>0</td>
<td>0.00%</td>
<td>0.00%</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
</tr>
</tbody>

Now if the first three td's in tbody are == 0 then I would like to add a class to the tr that will effectively hide that row. How would I go about doing this using jQuery?

EDIT: Sorry forgot to add what I have tried. The following is a test script I tried to see if I could collect all the td's

$(document).ready(function() {
    $("#table1 td").filter(function() {
        return $(this).text == 0;
    }).css("text-color", "red");

    });

• javascript
• jquery
• html

• Added what I tried. Sorry forgot to put that up. – user670595 Commented Nov 16, 2012 at 19:19
• What is .css("text-color"? – Ian Commented Nov 16, 2012 at 19:19
• @Ian I just wanted to see if the filter function would select the correct td's – user670595 Commented Nov 16, 2012 at 19:19
• @NicYoung Yes, but text-color is not a style. I think you meant for color? – Ian Commented Nov 16, 2012 at 19:21
• And in your code, you'd want to use .text(), not .text...and probably pare to "0" not 0, although I'm guessing the parison would still work since you're using == – Ian Commented Nov 16, 2012 at 19:21

1 Answer 1

You can do this :

$('tr').each(function(){
    var tr = $(this);
    if (tr.find('td:eq(0)').text()=="0"
        && tr.find('td:eq(1)').text()=="0"
        && tr.find('td:eq(2)').text()=="0"
    ) tr.addClass('hidden');
});

Demonstration (the hidden class changes the color to red, it's clearer...)

Depending on your need, you might have to trim the texts, or to parse them.

For more plex tests, you might find useful to work directly with an array of the cell contents. You can get it using

var celltexts = tr.find('td').map(function(){return $(this).text()}).toArray();