javascript - 循环遍历 CSS 表格并对选定的单元格进行计数

Question

我正在尝试遍历所有 css 表并显示每个单元格中选择了多少个单元格。

我正在使用 each 方法，但它似乎不起作用。

感谢您的帮助。

我的代码在下面，这是 fiddle

j查询:

$(function () {
    $('.css-table-td').click(function () {
        var theTable = $(this).closest('.css-table');
            $(this).toggleClass("highligh-cell");
    });
});

$("#csstableinfo").click( function() {  
    var sCount=0;
    $(".css-table  div").each(function (index) {       
  //     sCount=theTable.find('.css-table-td.highligh-cell').length;   this is not workikng    
        alert (sCount)
    });
});

HTML:

<div class="css-table">
    <div class="css-table-tr">
        <div class="css-table-td" id="1">b</div>
        <div class="css-table-td" id="2">c</div>
        <div class="css-table-td" id="3">e</div>
       </div>
</div>
<br/>
<div class="css-table">
    <div class="css-table-tr">
        <div class="css-table-td" id="1">b</div>
        <div class="css-table-td" id="2">c</div>
        <div class="css-table-td" id="3">e</div>
       </div>
</div>
<br/>
<div class="css-table">
    <div class="css-table-tr">
        <div class="css-table-td" id="1">b</div>
        <div class="css-table-td" id="2">c</div>
        <div class="css-table-td" id="3">e</div>
       </div>
</div>
<br/>
<INPUT TYPE="submit" id="csstableinfo" VALUE="Count Selected">

CSS:

.css-table {
    display: table;
    background-color:#ccc;
}
.css-table-tr {
    display: table-row;
     height:30px;
}
.css-table-td {
    display: table-cell;
    border:1px solid #fff;
    width: 30px;
    text-align:center;
    vertical-align:middle;
}
.highligh-cell {
    background: #999;
}

Answer 1

$(".css-table .highligh-cell").length 将为您提供所选元素的数量，无需使用每个元素。

$("#csstableinfo").click(function () {
    alert($(".css-table  .highligh-cell").length);
});

jsfiddle DEMO

编辑:

获取每个表中有多少被选中:

$("#csstableinfo").click(function () {
    var msg = "";
    $(".css-table").each(function(index) {
        var sCount = $(this).find('.highligh-cell').length;
        msg += "table_" + index + " = " + sCount + "\n";
    });
    alert(msg);
});

Updated jsfiddle