使用 javascript 添加 table 个元素

Question

假设我有一个 table 的列产品，这是其中的行

<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

获取 table 的所有最后一个 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 获取 table 的所有行并遍历它以获得如下所示的单元格值

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

使用 javascript 添加 table 个元素

Adding table elements using javascript

html

javascript

html-table

elements