本文将指导你如何使用 JavaScript 动态生成 HTML 表格，并在表格底部添加一行，用于显示每一列的总和。通过修改现有的表格生成函数，我们将在循环中计算每一列的总和，并在表格生成完毕后，将总和添加到表格的最后一行。
计算并显示表格列总和
首先，我们需要修改现有的 tablica() 函数，以便在生成表格的同时计算每一列的总和。我们将创建三个变量 sum1、sum2 和 sum3 来分别存储每一列的总和。
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..."); return; // 增加 return 语句，防止后续代码执行 } var rez = "| N | N² | N! |
|---|---|---|
| " + val1 + " | " + val2 + " | " + val3 + " |
| " + sum1 + " | " + sum2 + " | " + sum3 + " |
代码解释：
初始化总和变量： 在函数开始时，我们初始化 sum1、sum2 和 sum3 为 0。循环内累加： 在 for 循环中，每次生成表格的一行时，我们将对应的值分别加到 sum1、sum2 和 sum3 中。添加总和行： 在循环结束后，我们使用 rez = rez + “” + sum1 + “” + sum2 + “” + sum3 + “”; 将包含总和的一行添加到表格字符串 rez 中。添加 return 语句: 当输入值小于2时，函数会弹出警告框，为了避免后续代码执行，增加return语句。
HTML 结构
为了使上述 JavaScript 代码能够正常工作，我们需要在 HTML 中添加一个输入框、一个按钮和一个用于显示结果的 div 元素。
立即学习“Java免费学习笔记（深入）”；
代码解释：
: 创建一个文本输入框，用户可以在其中输入数字。id=”broj” 用于在 JavaScript 代码中获取输入框的值。: 创建一个按钮，当用户点击该按钮时，会调用 tablica() 函数。
: 创建一个 div 元素，用于显示生成的表格。id=”rezultat” 用于在 JavaScript 代码中将表格插入到该 div 元素中。
完整代码示例
以下是完整的 HTML 和 JavaScript 代码示例：
表格列总和 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; }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..."); return; // 增加 return 语句，防止后续代码执行 } 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;}
注意事项
输入验证： 在实际应用中，应该对用户输入进行验证，以确保输入的是有效的数字。错误处理： 应该添加错误处理机制，以处理可能出现的异常情况，例如用户输入非数字字符。代码优化： 可以对代码进行优化，例如使用 += 运算符来简化累加操作。
总结
通过本文，你学习了如何使用 JavaScript 动态生成 HTML 表格，并在表格底部添加一行，用于显示每一列的总和。这个方法可以应用于各种需要动态生成表格并计算列总和的场景。 记住，良好的代码风格和错误处理是编写高质量代码的关键。
以上就是使用 JavaScript 在表格中添加列总和行的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1573632.html
微信扫一扫 
支付宝扫一扫 
