如何使用JavaScript实现表格勾选行指定列数值求和

修改方案 #

第一步：调整HTML表格列结构 #

给需要求和的3列添加对应类名，方便JS精准取值：

<!-- 把你原来的3列td替换成下面的代码 -->
<td class="ts">{{out.ts}}</td>
<td class="pl">{{out.pl}}</td>
<td class="rem">{{out.rem}}</td>

第二步：替换JS逻辑 #

完整可直接使用的JS代码如下：

var
    $form = $("#out_form"),
    $allCheckboxes = $("input:checkbox", $form),
    $sumOut = $("#checked-sum"),
    $countOut = $("#checked-count");
  
$allCheckboxes.change(function() {
    var sum = 0,
        count = 0;
    $allCheckboxes.each(function(index, el) {
        var $el = $(el);
        if ($el.is(":checked")) {
            count++;
            // 找到当前复选框所在的表格行
            var $currentRow = $el.closest("tr");
            // 取当前行三列的数值，转整数，空值/非数值默认取0
            var val1 = parseInt($currentRow.find(".ts").text().trim(),10) || 0;
            var val2 = parseInt($currentRow.find(".pl").text().trim(),10) || 0;
            var val3 = parseInt($currentRow.find(".rem").text().trim(),10) || 0;
            // 累加当前行的总和
            sum += val1 + val2 + val3;
        }
    });
    // 输出结果
    $sumOut.text(sum);
    $countOut.text(count);
});

小提示：如果你的数值包含小数，把代码里的parseInt替换为parseFloat即可。

原代码问题说明 #

• 没有给需要取值的td添加对应类名，导致选择器无法匹配到目标元素
• 错误遍历$form对象，querySelector默认只返回第一个匹配的元素，所以只会计算第一行的数值
• 存在重复累加total的逻辑，会导致最终求和结果翻倍

内容的提问来源于stack exchange，提问作者sk1p