使用 JavaScript 在表格底部添加列总和行

本文将详细介绍如何使用 JavaScript 在动态生成的 HTML 表格底部添加包含各列总和的行。通过在循环中累加每一列的值，并在表格生成后添加包含总和的新行，可以轻松实现这一功能。本文提供了清晰的代码示例和详细的步骤说明，帮助你理解并应用这一技术。

实现步骤

要在表格底部添加列总和行，我们需要在生成表格数据的循环中，同时计算每一列的总和。然后，在表格生成完毕后，将这些总和添加到新的表格行中。

以下是具体步骤：

1. 初始化总和变量： 在 tablica() 函数的开始，声明并初始化三个变量 sum1, sum2, sum3，分别用于存储第一列（N）、第二列（N²）和第三列（N!）的总和。初始值都设为 0。

   立即学习“Java免费学习笔记（深入）”；

   

   科威旅游管理系统

   该软件是以php+MySQL进行开发的旅游管理网站系统。系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。

   下载

2. 在循环中累加总和： 在 for 循环中，每次生成新的表格行时，将当前行的每一列的值分别加到对应的总和变量上。

3. 创建总和行： 在循环结束后，创建一个新的表格行

   ，并在其中包含三个单元格 ，分别显示 sum1, sum2, sum3 的值。将这个新的表格行添加到表格字符串 rez 中。

4. 更新 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 = "";
        var faktorijela = 1;
    }
    for (var i = 1; i <= nr; i++) {
        let val1 = i;
        let val2 = i * i;
        let val3 = (faktorijela = faktorijela * i);
        rez = rez + "";
        sum1 = sum1 + val1;
        sum2 = sum2 + val2;
        sum3 = sum3 + val3;
    }
    rez = rez + "";
    rez = rez + "
N
N²
N!
" + val1 + "
" + val2 + "
" + val3 + "
" + sum1 + "
" + sum2 + "
" + sum3 + "
";

    var rezTablica = document.getElementById("rezultat");
    rezTablica.innerHTML = rez;
}

HTML 代码

Test

注意事项

• 数据类型： 确保用于存储总和的变量与表格中要累加的数据类型一致。如果表格中包含的是字符串，需要先将其转换为数字再进行累加。
• 错误处理： 在实际应用中，应该添加错误处理机制，例如检查输入是否为数字，以及处理可能出现的其他异常情况。
• 性能优化： 如果表格数据量非常大，可以考虑使用更高效的算法来计算总和，例如使用 reduce 方法。

总结

通过以上步骤，我们成功地在动态生成的 HTML 表格底部添加了包含列总和的行。这种方法简单易懂，适用于各种需要计算表格列总和的场景。在实际应用中，可以根据具体需求进行适当的修改和优化。