如何在jQuery中使用特定值过滤表行?

时间:2012-12-23 01:54:02

标签: jquery

我希望能够计算出一个单元格具有特定值的所有行的计数。因此,如果给出下表,用户选中第1行旁边的复选框,我会得到以下内容。

选择奖励行= 1 选择基行= 0

如果我选中第2行旁边的框,我会得到以下值

选择奖励行= 2 选择基行= 0

如果我取消选中第二行,并检查第三行,我会得到......

选择奖励行= 1 选择的基行= 1

我可以通过这种方式获得选择的总行数......

$(function(){
var $ck = $('input[type=checkbox]');
    $ck.filter(':checked').length;
)};

我能以某种方式将选择器链接在一起吗?这不起作用,但我想到的是......

m1 = $ck.filter(':checked')
               .parents('tr:first')
               .filter('.type')
               .text('Bonus')
               .length;
alert(m1); // returns 0

这是一个示例表

<table>
    <thead>
    <tr>
        <th>Points</th>
        <th>Bonus</th>
        <th>&nbsp;</th>
    </tr>   
</thead>
<tbody>
    <tr>
        <td class=".points">10</td>
        <td class=".type">Bonus</td>
        <td class=".chkbox"><input type="checkbox"></td>
    </tr>
    <tr>
        <td class=".points">20</td>
        <td class=".type">Bonus</td>
        <td class=".chkbox"><input type="checkbox"></td>
    </tr>
    <tr>
        <td class=".points">10</td>
        <td class=".type">Base</td>
        <td class=".chkbox"><input type="checkbox"></td>
    </tr>
    <tr>
        <td class=".points">20</td>
        <td class=".type">Base</td>
        <td class=".chkbox"><input type="checkbox"></td>
    </tr>
</tbody>

1 个答案:

答案 0 :(得分:0)

你可以试试这个

var chk=$('td.chkbox input:checkbox');
chk.on('change', function(){
    var checked=chk.filter(':checked');
    var bonus=0, base=0;
        checked.filter(function(){ 
        bonus+=$(this).closest('tr').find('td.type:contains("Bonus")').length;
        base+=$(this).closest('tr').find('td.type:contains("Base")').length;
    });
    $('div#result').html('Bonus rows selected = '+bonus+' Base rows selected = '+base);
});

另请注意class=".className"应为class="className"

An Example Here