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

本文将指导你如何使用 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 = "";
    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;
}

代码解释：

1. 初始化总和变量： 在函数开始时，我们初始化 sum1、sum2 和 sum3 为 0。
2. 循环内累加： 在 for 循环中，每次生成表格的一行时，我们将对应的值分别加到 sum1、sum2 和 sum3 中。
3. 添加总和行： 在循环结束后，我们使用 rez = rez + " " + sum1 + " " + sum2 + " " + sum3 + " "; 将包含总和的一行添加到表格字符串 rez 中。
4. 添加 return 语句: 当输入值小于2时，函数会弹出警告框，为了避免后续代码执行，增加return语句。

HTML 结构

为了使上述 JavaScript 代码能够正常工作，我们需要在 HTML 中添加一个输入框、一个按钮和一个用于显示结果的 div 元素。

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

迦恩计算机资源网源码(图书销售类)

采用三层架构开发，前台集成了产品在线展示，用户注册、在线调查、在线投稿后台有类别管理\图书管理\订单管理\会员管理\配送范围管理\邮件列表\广告管理\友情链接管理等后台添加图书时自动生成缩略图和文字水印主要参考了petshop的设计架构、使用了Asp.net2.0中很多MemberShip、master等新功能后台管理地址/web/admin/ 超级管理员账号密码均为aspx1特别提示：该系统需要

下载

Test

代码解释：

• : 创建一个文本输入框，用户可以在其中输入数字。id="broj" 用于在 JavaScript 代码中获取输入框的值。
• Test: 创建一个按钮，当用户点击该按钮时，会调用 tablica() 函数。
• : 创建一个 div 元素，用于显示生成的表格。id="rezultat" 用于在 JavaScript 代码中将表格插入到该 div 元素中。

完整代码示例

以下是完整的 HTML 和 JavaScript 代码示例：

Test

注意事项

• 输入验证： 在实际应用中，应该对用户输入进行验证，以确保输入的是有效的数字。
• 错误处理： 应该添加错误处理机制，以处理可能出现的异常情况，例如用户输入非数字字符。
• 代码优化： 可以对代码进行优化，例如使用 += 运算符来简化累加操作。

总结

通过本文，你学习了如何使用 JavaScript 动态生成 HTML 表格，并在表格底部添加一行，用于显示每一列的总和。这个方法可以应用于各种需要动态生成表格并计算列总和的场景。 记住，良好的代码风格和错误处理是编写高质量代码的关键。