Question

如何在每个提交按钮事件之后对每一行的值求和。

我需要计算<td>的总值。

当前代码正在计算总表行。

function myFunction() {
  var x = document.getElementById("myTable").rows[0].cells.length;
  document.getElementById("demo").innerHTML =  x  ;
}

<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
</style>
</head>
<body>


<table id="myTable">
  <tr>
    <td>52</td>
    <td>52</td>
    <td>12</td>
  </tr>

</table>
<br> 

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>



</body>
</html>

Answer 1

获取所有td的迭代，并添加td的textContent。将字符串转换为数字

function myFunction() {
  var sum = 0;
  document.querySelectorAll('td').forEach(e => sum += +e.textContent)
  console.log(sum)
}

<html>

<head>
  <style>
    table,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>


  <table id="myTable">
    <tr>
      <td>52</td>
      <td>52</td>
      <td>12</td>
    </tr>

  </table>
  <br>

  <button onclick="myFunction()">Try it</button>

  <p id="demo"></p>



</body>

</html>

Answer 2

使用Array.from()将.cells转换为数组，并使用reduce()添加每个单元格的textContent。请确保使用{将textContent转换为数字{1}}或Unary Plus Number()

function myFunction() {
  var cells = Array.from(document.getElementById("myTable").rows[0].cells);
  let x = cells.reduce((ac,{textContent}) => Number(textContent) + ac,0);
  document.getElementById("demo").innerHTML =  x  ;
}
function myFunction() {
  var cells = document.getElementById("myTable").rows[0].cells
  let sum = 0;
  for(let i = 0;i<cells.length;i++){
    sum += +cells[i].textContent 
  }
  document.getElementById("demo").innerHTML =  sum
}

如果您想要一种不使用任何高级方法的简单方法。您可以使用

<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
  <tr><td>52</td><td>52</td><td>12</td></tr>
</table>
<br> 
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
</html>

Answer 3

在代码更改最少的情况下，我使用querySelectorAll并使用+

转换为数字

JS <2015，因为OP可能是JS的新功能

get

function myFunction() {
  var sum = 0, cells = document.querySelectorAll("#myTable td");
  // all browsers understand a for loop
  for (var i=0; i<cells.length; i++) {
    sum += +cells[i].innerText;
  }
  document.getElementById("demo").innerText = sum
}

table,
td {
  border: 1px solid black;
}

相同但在更新的JS中-无需减少

<table id="myTable">
  <tr>
    <td>52</td>
    <td>52</td>
    <td>12</td>
  </tr>

</table>
<br>

<button type="button" onclick="myFunction()">Try it</button>

<p id="demo"></p>

function myFunction() {
  var sum = 0, cells = document.querySelectorAll("#myTable td");
  cells.forEach(cell => sum += +cell.innerText);
  document.getElementById("demo").innerText = sum
}

table,
td {
  border: 1px solid black;
}

Answer 4

您需要遍历单元格。如果您首先使用传播语法（cells）将...传播到一个数组中，那么可以循环使用单元格集合的一种方法是使用.reduce。然后，您可以将.reduce与destructuring assignment结合使用，以将每个表数据元素中的数字相加。

请参见以下示例：

const displaySum = _ => {
  const cells = [...document.getElementById("myTable").rows[0].cells],
  sum = cells.reduce((total, {textContent:num}) => +num + total, 0)
  
  document.getElementById("demo").textContent = sum;
}

<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
</style>
</head>
<body>


<table id="myTable">
  <tr>
    <td>52</td>
    <td>52</td>
    <td>12</td>
  </tr>
</table>
<br> 

<button onclick="displaySum()">Try it</button>
<p id="demo"></p>
</body>
</html>

Javascript-按下提交按钮后如何对每一行的值求和

4 个答案: