Javascript - Как суммировать значение каждой строки после нажатия кнопки отправки

ProgramBox

Javascript — Как суммировать значение каждой строки после нажатия кнопки отправки

Post author:admin
Запись опубликована:20 мая, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Как суммировать значение каждой строки после каждого события кнопки отправки.

Мне нужно вычислить общее значение <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>

Ответ №1:

Получите все td, выполните итерацию по ним и добавьте текстовое содержимое td. Преобразуйте строку в число

 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>

Ответ №2:

Вам нужно выполнить цикл по вашим ячейкам. Один из способов, которым вы могли бы перебирать свою коллекцию ячеек, — это использовать, .reduce если вы сначала распространяете свою cells информацию в массив, используя синтаксис spread ( ... ). Затем вы можете использовать .reduce with 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>

1. @mplungjan теперь, когда я смотрю на это, я полагаю, что вы правы. Хотя reduce это хорошо для сценариев, где вам нужно сложить данные в массив (и получить общее количество), я полагаю, что в этом случае было бы лучше использовать обычный forEach цикл, поскольку он начинается не как массив, а скорее как collect 🙂

2. Нравится {textContent: num}, хотя

Ответ №3:

С наименьшими изменениями в вашем коде я использую querySelectorAll и преобразую в число, используя

JS<2015, поскольку OP, вероятно, является новым для JS

 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;
}

 <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>

То же самое, но в более новом JS — нет необходимости уменьшать

 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;
}

 <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>

Ответ №4:

Преобразовать .cells в массив с помощью Array.from() и использовать reduce() для добавления textContent каждой ячейки.Обязательно преобразуйте textContent в число, используя 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>

Если вам нужен простой способ, не использующий продвинутых методов. Вы можете использовать

 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
}