使用jQuery在表中基于`td`的值隐藏`tr`

时间:2012-11-16 19:14:09

标签: javascript jquery html

我的表中充满了来自后端数据库查询的动态内容。我想要隐藏任何只包含零的tr

以下是我的表格:

<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>

现在,如果td中的前三个tbody== 0,那么我想向tr添加一个有效隐藏该行的类。我将如何使用jQuery进行此操作?

修改 的 对不起忘了添加我尝试过的内容。以下是我试图查看是否可以收集所有td

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

    });

1 个答案:

答案 0 :(得分:7)

你可以这样做:

$('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(隐藏的类将颜色更改为红色,更清晰......)

根据您的需要,您可能需要trim文本,或parse

对于更复杂的测试,您可能会发现直接使用单元格内容数组非常有用。你可以使用

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