JavaScript：动态生成表格并计算列总和-小浪学习网

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免费学习笔记（深入）”；

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; }

代码解释:

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