用jQuery计算列中“选定”表单元格的数量

Question

我有一个包含5列的表格，我需要用户“选择”和“取消选择”单元格。然后，我需要将每个列中有多少个单元格保持为“选中”状态。

我通过简单的切换功能选择单元格，更改了单元格的类别

$('td').toggle(function() {
 $(this).addClass("selectedCell");
 }, function() {
 $(this).removeClass("selectedCell");
});

因此，我想我需要做的是获取当前类别为“ selectedCell”的每一列中的所有单元格，并将其分配给5个变量，这样我就可以显示“您从第4列中选择了3个项目”。

我如何最好地做到这一点？

Answer 1

不确定如何设置表以处理“列”，但要获取表中选定单元格的总数，请使用以下命令：

$('table').find('td.selectedCell').length

示例：http：//jsfiddle.net/AlienWebguy/tYT2E/

如果将表设置更改为div结构，则计算所需内容会容易得多：

HTML：

<div id="wrapper">
    <div class="column">
        <div class="selectedCell">1</div>
        <div>2</div>
        <div class="selectedCell">3</div>
        <div class="selectedCell">4</div>
        <div>5</div>
        <div>6</div>
        <div class="selectedCell">7</div>
    </div>
    <div class="column">
        <div class="selectedCell">8</div>
        <div class="selectedCell">9</div>
        <div>10</div>
        ..........
    </div>
</div>
<div id="status"></div>

jQuery的：

function update_counts(){
    $('#status').html('');
    $('.column').each(function(index){
       $('#status').append($(this).find('.selectedCell').length + ' selected cells in column ' + (index + 1) + '<br />');
    }); 
}

$('.column div').click(function(){

    // Add or remove class
    $(this).toggleClass('selectedCell');

    // Update the class counts
    update_counts();

});

// Run the function on domready
$(function(){
    update_counts();
});

示例：http：//jsfiddle.net/AlienWebguy/tYT2E/4/