Question

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");

    });

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