Javascript 在按类过滤后，如何对html表中的元素求和？_Javascript_Html

Javascript 在按类过滤后，如何对html表中的元素求和？

javascript html

Javascript 在按类过滤后，如何对html表中的元素求和？,javascript,html,Javascript,Html,我通过在javascript中定义不同的类创建了下表。该表实际上更大，但为了更好地理解，我将其缩减为3行我在第一列中手动输入，它计算A、B、C和总和 A=5*输入 B=4*输入 C=3*输入总和=A+B+C 在这个例子中，Total SUM=应该是36+24+60。实际上，我的列中有更多的行，但我不知道如何使作业自动化。我正朝着这个方向尝试一些东西，但它不起作用： forEach ({ row.querySelector(".total").value +- = (N

我通过在javascript中定义不同的类创建了下表。该表实际上更大，但为了更好地理解，我将其缩减为3行

我在第一列中手动输入，它计算A、B、C和总和

A=5*输入

B=4*输入

C=3*输入

总和=A+B+C

在这个例子中，Total SUM=应该是36+24+60。实际上，我的列中有更多的行，但我不知道如何使作业自动化。我正朝着这个方向尝试一些东西，但它不起作用：

forEach ({

row.querySelector(".total").value +- =  (Number(row.querySelector(".sum"))

以下是表的代码以及我如何生成值：

<table class="egt" bgcolor="Olive">
  <! --SEGUNDA LINEA -->
  <thead>
    <tr>
      <th>INPUT</th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>SUM</th>
    </tr>
  </thead>

  <! --TERCERA LINEA -->
  <tr>
    <td>
      <input type="number" class="fuel" style="text-align:center">
    </td>
    <td>
      <input class="A" type="number" style="text-align:center" />
    </td>
    <td>
      <input class="B" type="number" style="text-align:center" />
    </td>
    <td>
      <input class="C" type="number" style="text-align:center" />
    </td>
    <td>
      <input class="sum" type="number" style="text-align:center" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="number" class="fuel" style="text-align:center">
    </td>
    <td>
      <input class="A" type="number" style="text-align:center" />
    </td>
    <td>
      <input class="B" type="number" style="text-align:center" />
    </td>
    <td>
      <input class="C" type="number" style="text-align:center" />
    </td>
    <td>
      <input class="sum" type="number" style="text-align:center" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="number" class="fuel" style="text-align:center">
    </td>
    <td>
      <input class="A" type="number" style="text-align:center" />
    </td>
    <td>
      <input class="B" type="number" style="text-align:center" />
    </td>
    <td>
      <input class="C" type="number" style="text-align:center" />
    </td>
    <td>
      <input class="sum" type="number" style="text-align:center" />
    </td>
  </tr>
  <! --ULTIMA LINEA -->
  <tr>
    <th colspan="4" align="right">Total SUM = </th>
    <td><input class="total" type="number" /></td>
  </tr>
</table>

谢谢你的建议

添加新函数以更新总值

let rows = document.querySelectorAll("tbody tr");
[...rows].forEach(row => {
    row.querySelector(".fuel").addEventListener("input", (event) => {
        calculate(row)
    })
})


function calculate(row) {

    let fuel = row.querySelector(".fuel").value;
    row.querySelector(".A").value = (5 * fuel);
    row.querySelector(".B").value = (4 * fuel);
    row.querySelector(".C").value = (3 * fuel);
    row.querySelector(".sum").value = (Number(row.querySelector(".A").value) + Number(row.querySelector(".B").value) + Number(row.querySelector(".C").value));
    calculateSum();
}

function calculateSum() {
    let elements = document.querySelectorAll("tbody .sum");
    let total = 0;
    [...elements].forEach(ele => {
        total += parseFloat(ele.value) || 0;
    })
    document.querySelector("tbody .total").value = total;
}

添加新函数以更新总值

let rows = document.querySelectorAll("tbody tr");
[...rows].forEach(row => {
    row.querySelector(".fuel").addEventListener("input", (event) => {
        calculate(row)
    })
})


function calculate(row) {

    let fuel = row.querySelector(".fuel").value;
    row.querySelector(".A").value = (5 * fuel);
    row.querySelector(".B").value = (4 * fuel);
    row.querySelector(".C").value = (3 * fuel);
    row.querySelector(".sum").value = (Number(row.querySelector(".A").value) + Number(row.querySelector(".B").value) + Number(row.querySelector(".C").value));
    calculateSum();
}

function calculateSum() {
    let elements = document.querySelectorAll("tbody .sum");
    let total = 0;
    [...elements].forEach(ele => {
        total += parseFloat(ele.value) || 0;
    })
    document.querySelector("tbody .total").value = total;
}

我试着把你的例子简化一点。在代码开始时选择我们需要的所有元素，然后将事件侦听器附加到您的输入。当输入值更改时，我们将重新计算整行的总和以及之后的总和

const totalSum=document.querySelector'.total'；常量输入=document.queryselectoral.fuel'； const sums=document.queryselectoral.sum'； inputs.forEachinput=>{ input.addEventListener'input'，事件=>{ 重新计算输出；计算总和； }; }; 函数重新计算输出{ const row=input.parentNode.parentNode；常数a=输入值*5；常数b=输入值*4；常数c=输入值*3；常数和=a+b+c；行.querySelector'.A'.value=A；行.querySelector'.B'.value=B；行.querySelector'.C'.value=C；行.querySelector'.sum'.value=sum； } 函数重新计算总和{ totalSum.value=[…sums].reducetotal，当前=>total+=+current.value，0； } 输入 A. B C 总和总额=

常量设置==>{ const rows=document.queryselectoral.fuel'； […行].forEachrow=>row.addEventListener'input'，onInput； } const calculateSum==>{ const sums=[…document.queryselectoral.sum'].mapinput=>Number.parseIntinput.value； const result=sums.reducesum，value=>sum+value； document.querySelector'.total'.value=结果； } const onInput=事件=>{ 常量输入=event.target； const currentIndex=input.dataset.rowIndex；常量燃料=Number.parseIntinput.value，10；常数[A，B，C]=[5*燃料，4*燃料，3*燃料] 常数和=A+B+C； document.querySelector`[data row index=${currentIndex}].A`.value=A； document.querySelector`[data row index=${currentIndex}].B`.value=B； document.querySelector`[data row index=${currentIndex}].C`.value=C； document.querySelector`[数据行索引=${currentIndex}].sum`.value=sum；计算量； } //装载 window.addEventListener“加载”，设置； t车身输入[类型=编号]{ 文本对齐：居中； } 输入 A. B C 总和总额= 让我们把它清理干净：

[…querySelectorAll.sum'].reducea，v=>a+=v.value，0我刚刚尝试了row.querySelector.total.value=[…querySelectorAll.sum'].reducea，v=>a+=v.value，0，但它不起作用。不相关：节点列表为每个节点提供不使用排列的过滤标准是什么？它是如何工作的？[…querySelectorAll.sum'].reducea，v=>a+=v.value，0我刚刚尝试了row.querySelector.total.value=[…querySelectorAll.sum'].reducea，v=>a+=v.value，0，但它不起作用。不相关：NodeList提供了forEach而不使用spread。你的过滤标准是什么？它是如何工作的？一个带结果的小纸条。目前，所有值都被威胁为整数而不是小数。parseInt…，10。如果要将它们转换为十进制数，请使用数字。。。相反，您可以通过包含min&step来改进HTML，以使用户更难将负值和非整数值注入您的输入。一个关于结果的小注释。目前，所有值都被威胁为整数而不是小数。parseInt…，10。如果要将它们转换为十进制数，请使用数字。。。相反，您可以通过包含min&step来改进HTML，使用户更难将负值和非整数值注入到输入中。