javascript - 甲骨文顶点 : Javascript to display sum of a column in an interactive report based on a checked checkbox row

Question

我有一个交互式报告，其中包含一个复选框 (selectunselectall) 和包含数字的第 2 列 (countthisrow)。当检查第 1 列中的行时，我需要在交互式报告之后的文本项中显示第 2 列的总和。我为 column2 分配了一个静态 id，但不知道如何使用 javascript 编写动态操作。

<tr>
    <td class=" u-tC" aria-labelledby="selectunselectall" headers="selectunselectall"><input name="f01" type="checkbox" value="1"></td>
    <td class=" u-tC" aria-labelledby="C4665519416385240" headers="C4665519416385240">id1</td>
    <td class=" u-tC" aria-labelledby="countthisrow" headers="countthisrow">1</td>
    <td class=" u-tC" aria-labelledby="C4665768588385242" headers="C4665768588385242">abcd</td>
    <td class=" u-tC" aria-labelledby="C4665808804385243" headers="C4665808804385243">a</td>
</tr>
<tr>
    <td class=" u-tC" aria-labelledby="selectunselectall" headers="selectunselectall"><input name="f02" type="checkbox" value="2"></td>
    <td class=" u-tC" aria-labelledby="C4665519416385240" headers="C4665519416385240">id1</td>
    <td class=" u-tC" aria-labelledby="countthisrow" headers="countthisrow">2</td>
    <td class=" u-tC" aria-labelledby="C4665768588385242" headers="C4665768588385242">abcd</td>
    <td class=" u-tC" aria-labelledby="C4665808804385243" headers="C4665808804385243">a</td>
</tr>

Answer 1

你的HTML我正在用一个 div 来显示值，给这个 div 一个 id

<div id="total">Total val: </div>

<table>
  <tr>
    <td class=" u-tC" aria-labelledby="selectunselectall" headers="selectunselectall">
      <input name="f01" type="checkbox" value="1" id="f01">
    </td>
    <td class=" u-tC" aria-labelledby="C4665519416385240" headers="C4665519416385240">id1</td>
    <td class=" u-tC" aria-labelledby="countthisrow" headers="countthisrow">1</td>
    <td class=" u-tC" aria-labelledby="C4665768588385242" headers="C4665768588385242">abcd</td>
    <td class=" u-tC" aria-labelledby="C4665808804385243" headers="C4665808804385243">a</td>
</tr>
<tr>
    <td class=" u-tC" aria-labelledby="selectunselectall" headers="selectunselectall">
      <input name="f02" type="checkbox" value="2" id="f02">
    </td>
    <td class=" u-tC" aria-labelledby="C4665519416385240" headers="C4665519416385240">id1</td>
    <td class=" u-tC" aria-labelledby="countthisrow" headers="countthisrow">2</td>
    <td class=" u-tC" aria-labelledby="C4665768588385242" headers="C4665768588385242">abcd</td>
    <td class=" u-tC" aria-labelledby="C4665808804385243" headers="C4665808804385243">a</td>
  </tr>
</table>

你的 JavaScript

首先调用元素的id，然后创建一个addEventListener来捕获它的值取一个总变量，在其中分配所选复选框的值，然后将其显示到总 div

const checkbox1 = document.getElementById('f01')
const checkbox2 = document.getElementById('f02')
const totalVal = document.getElementById('total')

var total = 0;

checkbox1.addEventListener('change', (event) => {
  total += parseInt(event.target.value)
  totalVal.innerHTML = total
})

checkbox2.addEventListener('change', (event) => {
  total += parseInt(event.target.value)
  totalVal.innerHTML = total
})

如果您还需要任何其他信息，希望它能有所帮助。谢谢