Добавление элементов таблицы с использованием JavaScript

Question

Предположим, что у меня есть таблица продукта колонки, скорость это строки в нем

<tr> 
    <td>pepsi</td> 
    <td>2</td> 
</tr> 
<tr> 
    <td>juice</td> 
    <td>4</td> 
</tr> 

Я хочу, чтобы общая скорость, пример:

<tr> 
    <td>total</td> 
    <td>6</td> 
</tr> 

Answer 1

Получить все в прошлом td таблицы и получить сумму, итерации по ним. Наконец, сгенерируйте tr с вычисленной суммой.

// variable for storing the sum 
 
var sum = 0; 
 
// get all last td from tr 
 
// convert node list to array 
 
// for old browser use `[].slice.call` instead 
 
Array.from(document.querySelectorAll('tr td:last-child')) 
 
    // iterate over the td elements 
 
    .forEach(function(e) { 
 
    // calculate the sum based on the content 
 
    sum += Number(e.textContent) || 0; 
 
    }) 
 

 
// create tr element 
 
var tr = document.createElement('tr'); 
 
// add first cell for showing text 
 
tr.insertCell(0).textContent = 'total'; 
 
// add second column for sowing the calculated sum 
 
tr.insertCell(1).textContent = sum; 
 

 
// get the table and append the generated tr element 
 
document.querySelector('table tbody,table').appendChild(tr);

<table> 
 
    <tr> 
 
    <td>pepsi</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>juice</td> 
 
    <td>4</td> 
 
    </tr> 
 
</table>

Answer 2

Вы можете использовать innerHTML

table = document.getElementById('id_of_your_table'); 
table.innerHTML = table.innerHTML + '<tr><td>total</td><td>6</td></tr>'; 

Answer 3

Вы можете получить все строки таблицы с помощью table.rows и перебрать, что для получения значения ячеек, как показано ниже

(function(){ 
 
var table = document.getElementById("mytab1"); 
 
var sum = 0; 
 
for (var i = 0, row; row = table.rows[i]; i++) { 
 
    sum += parseInt(table.rows[i].cells[1].innerHTML) 
 
    // cells[1] is hardcoded (Assumed <td>2</td> will always the second cell your row) 
 
} 
 

 
var tr = document.createElement('tr'); 
 
tr.insertCell(0).textContent = 'total'; 
 
tr.insertCell(1).textContent = sum; 
 
table.appendChild(tr); 
 
})();

<table id="mytab1"> 
 
    <tr> 
 
     <td>pepsi</td> 
 
     <td>2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>juice</td> 
 
     <td>4</td> 
 
    </tr> 
 
</table>