jquery 获取根据某列值相加

原创

mob649e815c000a 2024-11-02 04:35:51 ©著作权

文章标签 jQuery HTML 数据 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e815c000a的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 jQuery 根据某列值相加的详解

在 Web 开发中，常常需要对表格数据进行操作。有时，我们需要根据某一列的值进行相加以获取总和。本文将教会你如何使用 jQuery 实现这一功能。为了让这个过程更易于理解，我们将通过一个简单的示例，逐步解析每个步骤。

流程概述

下面是完成“根据某列值相加”这一任务的整体流程：

步骤	描述
1	准备 HTML 表格数据
2	引入 jQuery 库
3	编写 JavaScript 代码来获取列数据并求和
4	显示求和结果

步骤详解

步骤 1：准备 HTML 表格数据

我们需要一个简单的 HTML 表格，其中包含我们需要进行求和的列。下面是示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>求和示例</title>
</head>
<body>
    <table id="data-table" border="1">
        <thead>
            <tr>
                <th>项目</th>
                <th>金额</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>项目 A</td>
                <td class="amount">100</td>
            </tr>
            <tr>
                <td>项目 B</td>
                <td class="amount">200</td>
            </tr>
            <tr>
                <td>项目 C</td>
                <td class="amount">300</td>
            </tr>
        </tbody>
    </table>
    <div>
        <strong>总和：</strong><span id="total-amount">0</span>
    </div>
</body>
</html>

这里我们创建了一个表格，第二列是我们需要进行求和的金额。

步骤 2：引入 jQuery 库

在你的 HTML 文件中引入 jQuery 库。可以使用 CDN 的方式引入：

<head>
    ...
    <script src="
    ...
</head>

步骤 3：编写 JavaScript 代码

在引入 jQuery 后，我们需要编写代码来获取“金额”这列的数据并进行求和。可以把以下代码添加到 </body> 标签之前。

<script>
    $(document).ready(function() {
        // 初始化总和变量
        let total = 0;

        // 遍历每一行
        $('#data-table tbody tr').each(function() {
            // 获取当前行金额列的值，并转换为数字
            let amount = parseFloat($(this).find('.amount').text());
            // 如果金额是一个有效数字，累加到总和
            if (!isNaN(amount)) {
                total += amount;
            }
        });

        // 将计算出的总和显示在页面上
        $('#total-amount').text(total);
    });
</script>

代码解析：

$(document).ready(function() { ... });：确保 DOM 已经加载完成后再执行代码。
let total = 0;：初始化总和为 0。
$('#data-table tbody tr').each(function() { ... });：遍历表格的每一行。
let amount = parseFloat($(this).find('.amount').text());：获取当前行的金额，使用 parseFloat 将文本转换为浮点数。
if (!isNaN(amount)) { total += amount; }：检查金额是否是有效数字，如果是，则累加到总和。
$('#total-amount').text(total);：在页面上显示总和。

步骤 4：显示求和结果

在上面的代码中，我们已经通过 $('#total-amount').text(total); 将总和显示在页面上。当你运行这个页面时，会看到底部的总金额会自动更新为 600。

甘特图展示

下面是这个实现过程的甘特图。

gantt
    title jQuery 根据某列值相加的流程
    dateFormat  YYYY-MM-DD
    section 准备阶段
    准备 HTML 表格数据     :a1, 2023-10-01, 1d
    引入 jQuery 库         :after a1  , 1d
    section 实现阶段
    编写 JavaScript 代码    :a2, after a1  , 2d
    显示求和结果            :after a2  , 1d