Question

我有一个包含5列的表格，我需要用户“选择”和“取消选择”单元格。然后，我需要保持每个COLUMN中有多少个单元被“选中”的运行总数。

我选择具有简单切换功能的单元格，更改单元格的类别

$('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/

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

1 个答案: