本文将详细介绍如何使用 JavaScript 在动态生成的 html 表格底部添加包含各列总和的行。通过在循环中累加每一列的值，并在表格生成后添加包含总和的新行，可以轻松实现这一功能。本文提供了清晰的代码示例和详细的步骤说明，帮助你理解并应用这一技术。
实现步骤
要在表格底部添加列总和行，我们需要在生成表格数据的循环中，同时计算每一列的总和。然后，在表格生成完毕后，将这些总和添加到新的表格行中。
以下是具体步骤：
-
初始化总和变量： 在 tablica() 函数的开始，声明并初始化三个变量 sum1, sum2, sum3，分别用于存储第一列（N）、第二列（N²）和第三列（N!）的总和。初始值都设为 0。
立即学习“Java免费学习笔记（深入）”；
-
在循环中累加总和： 在 for 循环中，每次生成新的表格行时，将当前行的每一列的值分别加到对应的总和变量上。
-
创建总和行： 在循环结束后，创建一个新的表格行 <tr>，并在其中包含三个单元格 <td>，分别显示 sum1, sum2, sum3 的值。将这个新的表格行添加到表格字符串 rez 中。
-
更新 HTML： 最后，将包含总和行的完整表格字符串 rez 赋值给 rezultat 元素的 innerHTML，从而在页面上显示带有总和行的表格。
代码示例
function tablica() { var sum1 = 0, sum2 = 0, sum3 = 0; var nr = document.getElementById("broj").value; if (nr < 2) { document.getElementById("rezultat").innerHTML = "Prilagođeno samo za rad s brojevima većim od 1"; window.alert("Unijeli ste broj " + broj.value + ", a taj broj je manji od 2..."); } else if (nr >= 2) { var rez = "<table id='tablica'><tr><th>N</th><th>N²</th><th>N!</th></tr>"; var faktorijela = 1; } for (var i = 1; i <= nr; i++) { let val1 = i; let val2 = i * i; let val3 = (faktorijela = faktorijela * i); rez = rez + "<tr><td>" + val1 + "</td><td>" + val2 + "</td><td>" + val3 + "</td></tr>"; sum1 = sum1 + val1; sum2 = sum2 + val2; sum3 = sum3 + val3; } rez = rez + "<tr><td>" + sum1 + "</td><td>" + sum2 + "</td><td>" + sum3 + "</td></tr>"; rez = rez + "</table>"; var rezTablica = document.getElementById("rezultat"); rezTablica.innerHTML = rez; }
HTML 代码
<input id="broj" type="text"> <button onclick="tablica()">Test</button> <div id="rezultat"> </div>
注意事项
- 数据类型： 确保用于存储总和的变量与表格中要累加的数据类型一致。如果表格中包含的是字符串，需要先将其转换为数字再进行累加。
- 错误处理： 在实际应用中，应该添加错误处理机制，例如检查输入是否为数字，以及处理可能出现的其他异常情况。
- 性能优化： 如果表格数据量非常大，可以考虑使用更高效的算法来计算总和，例如使用 reduce 方法。
总结
通过以上步骤，我们成功地在动态生成的 HTML 表格底部添加了包含列总和的行。这种方法简单易懂，适用于各种需要计算表格列总和的场景。在实际应用中，可以根据具体需求进行适当的修改和优化。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
