我在将行追加到表体中时遇到问题。 我写了整个逻辑部分，但我无法获得所需的解决方案。 我有一个带有一些行和列的表格；我还有一个用于计算商品总价的按钮。
单击按钮时，我想创建一行显示商品的总价。
这是我的代码:
function calcTotal() {
let sum = 0;
let price = document.querySelectorAll(".price");
for (let i = 0; i < price.length; i++) {
sum = sum + parseInt(price[i].innerHTML);
}
console.log(sum);
const tbody = document.getElementsByName("tbody");
const row = document.createElement("tr");
row.innerHTML = '<td>' + Grand - Total + '</td><td data-ns-test="grandTotal">' + sum + '</td>';
tbody[0].appendChild(row);
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Grocery List</h1>
<table>
<thead>
<tr>
<th>Sr. No.</th>
<th>Title</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item-1</td>
<td data-ns-test="price" class="price">100</td>
</tr>
<tr>
<td>2</td>
<td>Item-2</td>
<td data-ns-test="price" class="price">200</td>
</tr>
<tr>
<td>3</td>
<td>Item-3</td>
<td data-ns-test="price" class="price">2</td>
</tr>
<tr>
<td>4</td>
<td>Item-4</td>
<td data-ns-test="price" class="price">1</td>
</tr>
</tbody>
</table>
<button onClick='calcTotal()'>Total</button>
<script src="app.js"></script>
</body>
</html>最佳答案
有两个问题:
-
tbody是null，下列说法错误的是:
以上适用于:document.getElementsByName("tbody");<tbody name="tbody">...</tbody>document.getElementsByTagName("tbody");is the proper syntax. - 新的
<tr>仅添加了 2<td>但表的其余部分有 3 列。
在下面的示例中，<tfoot> ，一个<tr> ，一个<td colspan='2'> ，还有另一个<td>被添加。此外，第一次点击之后的点击仅更新总数，不更新 <tr> .
示例中注释了详细信息
// Bind click event to <button>
document.querySelector('.total').onclick = calcTotal;
function calcTotal(e) {
/*
Collect all .price into a NodeList then convert it into an array
Iterate through array with .map() and on each iteration
return current .price text coerced to a number
*/
const prices = [...document.querySelectorAll('.price')]
.map(p => +p.textContent);
// Get the sum of the array with .reduce()
const totalSum = prices.reduce((sum, add) => sum + add);
// Create and insert a <tfoot> into <table>
const tFoot = document.querySelector('table').createTFoot();
// If there was a <tfoot> there previously, empty it ✥
tFoot.replaceChildren();
// Create and insert a <tr> into <tfoot>
const row = tFoot.insertRow();
// Create and insert 2 <td> into the <tr> of <tfoot>
const colA = row.insertCell(0);
const colB = row.insertCell(1);
// Assign colspan and text to the first <td>
colA.setAttribute('colspan', '2');
colA.textContent = 'Grand Total';
// Add the sum previously calculated to last <td> of <tfoot>
colB.textContent = totalSum;
}
// ✥ Necessary to prevent any duplication of <tr>td:last-of-type {
text-align: right
}<!DOCTYPE html>
<html>
<head></head>
<body>
<table>
<caption>Grocery List</caption>
<thead>
<tr>
<th>No.</th>
<th>Title</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item-1</td>
<td class="price">100</td>
</tr>
<tr>
<td>2</td>
<td>Item-2</td>
<td class="price">200</td>
</tr>
<tr>
<td>3</td>
<td>Item-3</td>
<td class="price">2</td>
</tr>
<tr>
<td>4</td>
<td>Item-4</td>
<td class="price">1</td>
</tr>
</tbody>
</table>
<button class='total'>Total</button>
<script src="app.js"></script>
</body>
</html>关于javascript - 我想将总计添加到表中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73109382/