Сумма ячеек таблицы JavaScript

406

20 марта 2017, 09:46

Добрый день, есть вопрос, вот к примеру у меня есть таблица в HTML 4х4 с числовыми данными, и мне нужно на чистом JavaScript реализовать функцию, которая находит сумму ячеек в первом ряде таблицы и еще сумму всех ячеек таблицы Возможно ли это, и как? Начальный код:

function table() { 
var num1 = document.getElementById("1").value; 
var num2 = document.getElementById("2").value; 
var num3 = document.getElementById("3").value; 
var num4 = document.getElementById("4").value; 
num1 = parseFloat(num1); 
num2 = parseFloat(num2); 
num3 = parseFloat(num3); 
num4 = parseFloat(num4); 
var summ = num1 + num2 + num3 + num4; 
alert(summ);   
}

<table border="3" id="mytab"> 
	<tr> 
	<td id="1">10</td> 
	<td id="2">10</td> 
	<td id="3">10</td> 
	<td id="4">10</td> 
	</tr> 
 
	<tr> 
	<td>10</td> 
	<td>10</td> 
	<td>10</td> 
	<td>10</td 
	></tr> 
 
	<tr> 
	<td>10</td> 
	<td>10</td> 
	<td>10</td> 
	<td>10</td> 
	</tr> 
 
	<tr> 
	<td>10</td> 
	<td>10</td> 
	<td>10</td> 
	<td>10</td> 
	</tr> 
</table> 
<br> 
<input type="button" name="123" id="table" value="Suma" onclick="table()">

Answer 1

Ссылаясь на самого себя как итерировать по таблице/строкам таблицы/ячейкам получается так:

function myFunction() { 
  // инициализация сумм (строки и общей) 
  var rowSumm = 0; 
  var totalSum = 0; 
  // берем таблицу 
  var table = document.getElementById("mytab"); 
  // итерирование по строкам     
  for (var i = 0, row; row = table.rows[i]; i++) { 
    // обнуляем сумму по строке 
    rowSumm = 0; 
    // итерирование по столбцам       
    for (var j = 0, col; col = row.cells[j]; j++) { 
      rowSumm += parseFloat(col.firstChild.nodeValue); // parseFloat(col.innerHTML);             
    } 
 
    totalSum += rowSumm; 
 
    console.log('сумма в строке: ' + rowSumm); 
  } 
 
  console.log('итоговая сумма: ' + totalSum); 
}

<table border="3" id="mytab"> 
  <tr> 
    <td id="1">1</td> 
    <td id="2">2</td> 
    <td id="3">3</td> 
    <td id="4">4</td> 
  </tr> 
 
  <tr> 
    <td>10</td> 
    <td>11</td> 
    <td>12</td> 
    <td>13</td> 
  </tr> 
 
  <tr> 
    <td>20</td> 
    <td>30</td> 
    <td>40</td> 
    <td>50</td> 
  </tr> 
 
  <tr> 
    <td>10</td> 
    <td>10</td> 
    <td>10</td> 
    <td>10</td> 
  </tr> 
</table> 
<br> 
<input type="button" name="123" id="table" value="Suma" onclick="myFunction()">