Question

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

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

感谢您的帮助。

我的代码如下，这是fiddle

jquery的：

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

Answer 2

你甚至收到警报吗？如果没有，问题在于$（＆＃34; .css-table div＆＃34;）调用。您不应该以这种方式调用它，因为您调用的每个div都已包含css表类。

尝试使用$（＆＃34; .css-table＆＃34;），如果它不起作用，最好使用id。

P.S。你也为每一行使用不同的类，所以它不会识别行。

Answer 3

你只需要增加计数器并为所选择的类insert into t2(number, name) select number, name from t1;：

创建每个计数器

.highligh-cell

结帐DEMO

循环遍历CSS表并计算所选单元格

3 个答案: