【发布时间】：2019-07-12 00:13:02
【问题描述】：
我有一个表格，其中表格数据来自表格。我编写了一个 javascript 函数来对位于 tfoot 的 Value1、Value2 Value3 列求和。
<table id="table1" class="table table-hover table-responsive">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Value1</th>
<th scope="col">Value2</th>
<th scope="col">Value3</th>
<th scope="col">Info</th>
<th scope="col">Date</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody id="tbody-list">
<tr><td>Item1</td>
<td>1100</td>
<td>10</td>
<td>10</td>
<td>Info</td>
<td>2019-02-18</td>
<td> <a href="#" class="delete-item secondary-content"><i class="fa fa-trash"></i></a></td>
</tr>
<tr><td>Item2 </td>
<td>28.00 </td>
<td>0.87</td>
<td> 0.00 </td>
<td>Info</td>
<td>2019-02-18</td>
<td> <a href="#" class="delete-item secondary-content"><i class="fa fa-trash"></i></a></td>
</tr><tr><td>Item3 </td>
<td>28.00 </td>
<td>0.87</td>
<td> 0.00 </td>
<td>Info</td>
<td>2019-02-18</td>
<td> <a href="#" class="delete-item secondary-content"><i class="fa fa-trash"></i></a></td>
</tr><tr><td>Item4 </td>
<td>28.00 </td>
<td>0.87</td>
<td> 0.00 </td>
<td>Info</td>
<td>2019-02-18</td>
<td> <a href="#" class="delete-item secondary-content"><i class="fa fa-trash"></i></a></td>
</tr></tbody><tfoot>
<tr><td class="h4">TOTAL Values</td>
<td id="val1">NaN </td>
<td id="val2">NaN</td>
<td id="val3">NaN </td>
<td></td>
<td></td>
<td></td>
</tr></tfoot>
</table>
这是我的 js
sumValues(){
let val1 = parseFloat(document.getElementById('val1').innerHTML);
let val2 = parseFloat(document.getElementById('val2').innerHTML);
let val3 = parseFloat(document.getElementById('val3').innerHTML);
const table = document.getElementById('tbody-list');
for(let i = 0; i < table.rows.length; i++){
console.log("works");
val1 += parseFloat(table.rows[i].cells[1]).innerHTML;
val2 += parseFloat(table.rows[i].cells[2]).innerHTML;
val3 += parseFloat(table.rows[i].cells[3]).innerHTML;
}
document.getElementById('val1').innerHTML = `${val1}`;
document.getElementById('val2').innerHTML = `${val2}`;
document.getElementById('val3').innerHTML = `${val3}`;
}
这是我在 html 中的 tfoot，我将它们设置为 0，val1、val2、val3 的初始值也为 0，然后我可以对其求和。
<tfoot>
<td class="h4">TOTAL Values</td>
<td id="total-cal">0</td>
<td id="total-car">0</td>
<td id="total-fat">0</td>
<td id="total-amount"></td>
<td></td>
<td></td>
</tfoot>
我不知道错误出在哪里，但总价值总是得到 NaN？
另一个问题（与这个问题有关）。这是我的 eventListener ，所以每次表中有一个新项目时，都会调用 sum 函数但后来我意识到当我从表中删除一个项目时这不会启动，是否有我可以使用的事件监听器来启动桌面上的任何更改？
document.getElementById('tbody-list').addEventListener('DOMNodeInserted',function(){
const ui = new UI();
ui.sumValues();
});
【问题讨论】：
-
你应该用 0 初始化 val1,2 和 3 你可以试试
val1 += Number(table.rows[i].cells[1]).innerText.trim());
标签： javascript html-table sum