使用 javascript 添加表格元素 [关闭]答案

【问题标题】：Adding table elements using javascript [closed]使用 javascript 添加表格元素 [关闭]
【发布时间】：2016-09-23 05:11:39
【问题描述】：

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

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

我要总价，例如：

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

【问题讨论】：

如果是硬编码表？或者您正在获得价值作为回应？
我想要这些值作为响应
随着值的响应，我强烈建议您计算响应对象本身的总和，然后显示在 HTML 上，而不是显示表格，然后通过从 HTML 中选取值来计算总和。
如果您需要任何进一步的帮助，请回复您的问题。

标签： javascript html html-table elements

【解决方案1】：

获取表的所有最后一个 td 并通过迭代它们获得 sum。最后，使用计算的总和生成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>

【讨论】：

谢谢！！这就是我想要的
@peggy.go : 很高兴为您提供帮助
当试图将它添加到我的代码中时，它在控制台中显示错误“无法读取属性 'appendChild' of null”。你知道为什么吗？
@peggy.go : 试试document.querySelector('table tbody,table').innerHTML
我发现了我的愚蠢错误。我在标题中添加了脚本标签。 stackoverflow.com/a/8670572/6622173感谢您的帮助！

【解决方案2】：

您可以通过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>

【讨论】：

【解决方案3】：

你可以使用innerHTML

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

【讨论】：