本文将指导你如何使用 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 = "<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; }
代码解释：
- 初始化总和变量： 在函数开始时，我们初始化 sum1、sum2 和 sum3 为 0。
- 循环内累加： 在 for 循环中，每次生成表格的一行时，我们将对应的值分别加到 sum1、sum2 和 sum3 中。
- 添加总和行： 在循环结束后，我们使用 rez = rez + “<tr><td>” + sum1 + “</td><td>” + sum2 + “</td><td>” + sum3 + “</td></tr>”; 将包含总和的一行添加到表格字符串 rez 中。
- 添加 return 语句: 当输入值小于2时，函数会弹出警告框，为了避免后续代码执行，增加return语句。
HTML 结构
为了使上述 JavaScript 代码能够正常工作，我们需要在 HTML 中添加一个输入框、一个按钮和一个用于显示结果的 div 元素。
立即学习“Java免费学习笔记（深入）”；
<input id="broj" type="text"> <button onclick="tablica()">Test</button> <div id="rezultat"> </div>
代码解释：
- <input id=”broj” type=”text”>: 创建一个文本输入框，用户可以在其中输入数字。id=”broj” 用于在 JavaScript 代码中获取输入框的值。
- <button onclick=”tablica()”>Test</button>: 创建一个按钮，当用户点击该按钮时，会调用 tablica() 函数。
- <div id=”rezultat”></div>: 创建一个 div 元素，用于显示生成的表格。id=”rezultat” 用于在 JavaScript 代码中将表格插入到该 div 元素中。
完整代码示例
以下是完整的 HTML 和 JavaScript 代码示例：
<!DOCTYPE html> <html> <head> <title>表格列总和</title> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } </style> </head> <body> <input id="broj" type="text"> <button onclick="tablica()">Test</button> <div id="rezultat"> </div> <script> 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; } </script> </body> </html>
注意事项
- 输入验证： 在实际应用中，应该对用户输入进行验证，以确保输入的是有效的数字。
- 错误处理： 应该添加错误处理机制，以处理可能出现的异常情况，例如用户输入非数字字符。
- 代码优化： 可以对代码进行优化，例如使用 += 运算符来简化累加操作。
总结
通过本文，你学习了如何使用 JavaScript 动态生成 HTML 表格，并在表格底部添加一行，用于显示每一列的总和。这个方法可以应用于各种需要动态生成表格并计算列总和的场景。 记住，良好的代码风格和错误处理是编写高质量代码的关键。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
