Question

我有一个从数据库生成的表。并且每个字段都隐藏，直到从选择下拉列表中选择。还需要计算可见行。我有这个代码，但它计算所有行，甚至可见。您能否建议我如何修复代码以仅计算明显的行数。

TABLE：

<table width="100%" border="0" id="sum_table">
    <tr style="color:white;background:gray;">
        <td>Name</td>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
    </tr>
    <tr id="one">
        <td>Service 1</td>
        <td>12</td>
        <td>45</td>
        <td>45</td>
        <td>54</td>
    </tr>
    <tr id="two">
        <td>Service 2</td>
        <td>8</td>
        <td>42</td>
        <td>35</td>
        <td>23</td>
    </tr>
    <tr id="three">
        <td>Service 3</td>
        <td>6</td>
        <td>65</td>
        <td>16</td>
        <td>26</td>
    </tr>
    <tr id="result" style="background:silver;">
        <td>TOTAL:</td>
        <td id="total1">0</td>
        <td>0</td>
        <td></td>
        <td></td>
    </tr>
</table>
<br>ADD LINE:
<select id="select_stud">
    <option>-- Select --</option>
    <option>one</option>
    <option>two</option>
    <option>three</option>
</select>

JS：

$(document).ready(function () {
  $('#one').hide();
  $('#two').hide();
  $('#three').hide();

  $('#select_stud').change(function () {
    $('#'+$(this).val()).show();
  })
});


$("#sum_table tr:last td:not(:first,:last)").text(function(i){
    var t = 0;
    $(this).parent().prevAll().find("td:nth-child("+(i+2)+")").each(function(){
        t += parseInt( $(this).text(), 10 ) || 0;
    });
    return "= " + t;
});

另外，我只需要计算2列。

以下是完整代码： http://jsfiddle.net/stanencendo/u7a27vth/9/

感谢。

Answer 1

以下是您要尝试执行的操作示例：http://jsfiddle.net/u7a27vth/10/

要仅在计算总和时查看可见行，您可以添加如下条件：

if ( $(this).parent().css('display') != 'none' )

每次添加新列时，您还需要更新总和。您可以通过将总和计算包装在函数中（在本例中为updateSums）并在select函数的change函数中调用它来实现：

$('#select_stud').change(function () {
    $('#'+$(this).val()).show();
    updateSums();
})

那就是说，你的方法可能不是解决这个问题的最佳方法。通常，您希望视图来自您的数据，而不是相反。

修改：正如评论中所指出的，如果您还希望计算最后一列，则需要将$("#sum_table tr:last td:not(:first,:last)")更改为$("#sum_table tr:last td:not(:first)")

我不清楚这是否是你的意图。

Answer 2

$("#sum_table tr:last td:not(:first,:last)").text(function(i){
    var t = 0;
    $(this).parent().prevAll().find("td:nth-child("+(i+2)+")").filter(":visible").each(function(){
        t += parseInt( $(this).text(), 10 ) || 0;
    });
    return "= " + t;
});

JQuery - 表计算

2 个答案: