使用 JavaScript 在表格中添加列总和行-html教程-PHP中文网

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

碧海醫心

发布： 2025-08-26 19:14:01

原创

304人浏览过

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

飞书多维表格

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

查看详情

<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 表格，并在表格底部添加一行，用于显示每一列的总和。这个方法可以应用于各种需要动态生成表格并计算列总和的场景。记住，良好的代码风格和错误处理是编写高质量代码的关键。

以上就是使用 JavaScript 在表格中添加列总和行的详细内容，更多请关注php中文网其它相关文章！