如何在javascript中显示表的某些列的总和？

Question

我根本不懂javascript，我根据需要学习，我需要帮助我需要总结表的某些列的值，其中的行用复选框标记例如：我在两行中标记复选框表格和 3,4 和 5 列的总和被汇总并显示在页面上的某处

现在我设法找到了一段代码，它总结了表单中选中复选框的值，并将其显示在页面上您只需要替换一部分即可准确显示列数

这是这段代码

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),
        val;
    if ($el.is(":checked")) {
        count++;
      val = parseFloat($el.val());
      if (!isNaN(val)) {
        sum += val;
      }
    }
  });
  $sumOut.text(sum);
  $countOut.text(count);
});

HTML

       <form action="" method="post" id="out_form">
            <input type="hidden" name="next" value="{{next}}"/>
            <button type="submit">Check</button>
            <span id="checked-sum">0</span>
            <span id="checked-count">0</span>
            {%csrf_token%}
            <div class="table-view__container">
                <table class="table-view__table">
                    <tbody class="table-view__body">
                        {% for out in filter.qs %}
                        <tr>
                            <td>
                                <label class="custom_Label">
                                    <input type="checkbox" name="checked" value="{{ out.id }}">
                                    <span class="checkmark"></span>
                                </label>
                            </td>
                            <td>{{out.date|date:"d(D).m.Y"}}</td>
                            <td>{{out.ts}}</td>
                            <td>{{out.pl}}</td>
                            <td>{{out.rem}}</td>
                            <td>{{out.comment}}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </form>

有必要对这 3 列求和：

...
<td>{{out.ts}}</td>
<td>{{out.pl}}</td>
<td>{{out.rem}}</td>
...

Answer 1

JavaScript 可能令人困惑，它绝对不是一种简单的编程语言。 很抱歉没有使用您的代码，但我认为它过于复杂。

所以这段代码主要做的是触发函数，使用事件处理程序，总结result变量，然后在<span>标签中显示结果。

我将解释一下编码

• boxOne.addEventListener('change', () => { boxOne变量是第一个复选框，因此当 JavaScript 看到此元素发生变化时，它会触发该函数。

• table.rows[0].cells[1].innerHTML这将返回表格右侧第一行和第二个单元格内的字符串。

• parseInt()是必须使用的，因为我们需要总结整数而不是字符串。

• boxOne.checked ? result += sum : result -= sum; 这是一个三元运算符，它在问：是否选中了第一个复选框？ .. 如果是这样result += sum如果不是result -= sum

试试下面的片段

 var table = document.getElementById('table'), boxOne = document.getElementById('box1'), boxTwo = document.getElementById('box2'), show = document.getElementById('showResult'), result = 0; boxOne.addEventListener('change', () => { var firstValue = parseInt(table.rows[0].cells[1].innerHTML), secondValue = parseInt(table.rows[0].cells[2].innerHTML), sum = firstValue + secondValue; boxOne.checked ? result += sum : result -= sum; show.innerHTML = result; }); boxTwo.addEventListener('change', () => { var firstValue = parseInt(table.rows[1].cells[1].innerHTML), secondValue = parseInt(table.rows[1].cells[2].innerHTML), sum = firstValue + secondValue; boxTwo.checked ? result += sum : result -= sum; show.innerHTML = result; });

 td { border: 1px solid #dddddd; text-align: left; width:50px; text-align:center; } span{ font-size:20px; }

 <table id="table"> <tr> <td><input type="checkbox" id="box1" /></td> <td>1</td> <td>2</td> </tr> <tr> <td><input type="checkbox" id="box2" /></td> <td>3</td> <td>4</td> </tr> </table> <br> <br> <span>Result: </span><span id="showResult">0</span>