我想将总计添加到表中
[英]I want to add grand Total to table
问题描述
我面临将一行附加到表格正文中的问题。 我编写了整个逻辑部分，但我无法获得所需的解决方案。 我有一个有一些行和列的表； 我还有一个用于计算商品总价的按钮。
单击按钮时，我想创建一个显示项目总价的行。
这是我的代码：
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>
4 个解决方案
解决方案1
1 2022-07-25 12:53:46
代码中有很多错误：
- 您正在将“Grand Total”添加到不带引号的字符串中，因此它将这些作为变量
- 你需要使用
document.getElementsByTagName('tbody')
工作解决方案：
function calcTotal() { let sum = 0; let price = document.querySelectorAll(".price"); for(let i=0; i<price.length; i++){ sum = sum + parseInt(price[i].innerHTML); } const tbody = document.getElementsByTagName("tbody"); const row = document.createElement("tr"); row.innerHTML = '<td>Grand-Total </td><td colspan="2" 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>
解决方案2
1 2022-07-25 12:54:09
我已经为 TBody 添加了一个 ID 并为此调整了 javascript，然后我将 Grand - 添加在括号之间。
HTML：
<!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 id="body">
<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>
</body>
</html>
javascript
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.getElementById("body");
console.log(tbody)
const row = document.createElement("tr");
row.innerHTML = '<td> Grand - Total </td><td data-ns-test="grandTotal">' + sum + '</td>';
tbody.appendChild(row);
}
解决方案3
0 2022-07-25 12:46:05
这对我有用。 我使用querySelector而不是getElementsByName ，所以我没有要处理的数组。 如果您在页面上有多个 tbody，您可能会考虑给他们一个唯一的 id，或者 class，它指的是他们在做什么。
function calcTotal() {
let sum = 0;
let price = document.querySelectorAll(".price");
for (let i = 0; i < price.length; i++) {
sum = sum + parseInt(price[i].innerHTML);
}
// const tbody = document.getElementsByName("tbody");
const tbody = document.querySelector("tbody");
const row = document.createElement("tr");
window.r = row
window.tbody = tbody
row.innerHTML =
"<td>" +
"Grand-Total" +
'</td><td data-ns-test="grandTotal">' +
sum +
"</td>";
// tbody[0].appendChild(row);
tbody.appendChild(row);
}
我把原来的注释掉了，所以你可以看到我改变了什么
解决方案4
0 2022-07-25 14:15:47
有两个问题：
-
tbody是null，以下是错误的：
以上适用于：document.getElementsByName("tbody");<tbody name="tbody">...</tbody>document.getElementsBy标签Name("tbody");是正确的语法。 - 新添加的
<tr>只有 2 个<td>但表的 rest 有 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>
如何在 Tabulator.js 表中添加总计
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.