JavaScript：动态生成表格并计算列总和

本文档旨在指导初学者使用 JavaScript 动态生成 HTML 表格，并计算每列的总和，最后将总和添加到表格的底部作为新的一行。通过本文，你将学习如何使用 JavaScript 操作 DOM 元素，创建表格，以及进行简单的数值计算。

动态生成表格并计算列总和

在 Web 开发中，经常需要动态生成表格并进行一些计算。本教程将演示如何使用 JavaScript 创建一个表格，该表格根据用户输入的数字，计算该数字的平方和阶乘，并将结果显示在表格中。最后，我们还将计算每列的总和，并将其添加到表格的底部。

1. HTML 结构

首先，我们需要在 HTML 中创建一个输入框、一个按钮和一个用于显示结果的 div 元素：

<input id="broj" type="text">
<button onclick="tablica()">生成表格</button>
<div id="rezultat"></div>

2. JavaScript 代码

接下来，我们将编写 JavaScript 代码来实现表格的生成和计算。

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

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

26

查看详情

function tablica() {
    var sum1 = 0, sum2 = 0, sum3 = 0; // 初始化列总和
    var nr = document.getElementById("broj").value; // 获取用户输入的数字

    // 输入验证
    if (nr < 2) {
        document.getElementById("rezultat").innerHTML = "请输入大于等于2的数字";
        alert("请输入大于等于2的数字");
        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;
}

代码解释:

1. 初始化变量:
   • sum1, sum2, sum3: 用于存储每一列的总和，初始值为 0。
   • nr: 获取用户在输入框中输入的数字。
   • rez: 用于构建 HTML 表格字符串。
   • faktorijela: 用于计算阶乘，初始值为 1。
2. 输入验证: 检查用户输入是否小于 2。如果小于 2，则显示错误消息并结束函数执行。
3. 创建表格头部: 使用 HTML 字符串创建表格的头部，包含 "N", "N²", "N!" 三列。
4. 循环生成表格行:
   • 使用 for 循环从 1 迭代到用户输入的数字 nr。
   • 在每次迭代中，计算当前数字的平方 (i * i) 和阶乘 (faktorijela = faktorijela * i)。
   • 使用 HTML 字符串创建表格的一行，包含当前数字、平方和阶乘。
   • 将该行添加到 rez 字符串中。
   • 将当前行的三个值分别累加到 sum1, sum2, sum3 中。
5. 添加总和行: 在循环结束后，使用 HTML 字符串创建表格的最后一行，包含每一列的总和。
6. 显示表格: 将完整的 HTML 表格字符串赋值给 rezultat div 的 innerHTML 属性，从而在页面上显示表格。

3. 运行结果

当用户在输入框中输入一个数字（例如 5）并点击“生成表格”按钮后，页面将显示一个包含 5 行数据的表格，并且在表格底部会有一行显示每一列的总和。

4. 注意事项

• 数据类型: 请确保用户输入的是数字，可以使用 parseInt() 或 parseFloat() 函数将输入框中的值转换为数字。
• 错误处理: 可以添加更多的错误处理机制，例如检查用户是否输入了非数字字符。
• 样式美化: 可以使用 CSS 来美化表格的样式。
• 代码复用: 可以将生成表格的逻辑封装成一个独立的函数，方便在其他地方调用。

5. 总结

通过本教程，你学习了如何使用 JavaScript 动态生成 HTML 表格，并计算每列的总和。这只是一个简单的示例，你可以根据实际需求进行扩展和修改。希望本教程对你有所帮助！

以上就是JavaScript：动态生成表格并计算列总和的详细内容，更多请关注php中文网其它相关文章！