jQuery教程：动态求和TD标签内数值（ID含数组索引）

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

jQuery教程：动态求和TD标签内数值（ID含数组索引）

2025-10-09

浏览次数：次

返回列表

jQuery教程：动态求和TD标签内数值（ID含数组索引）

本教程详细介绍了如何利用jQuery高效地计算HTML中具有特定ID模式（如id='total[n]'）的标签内的数值总和。通过使用属性选择器[id*='total']和.each()迭代方法，您可以轻松提取并累加这些数值，最终将结果显示在页面上，适用于动态生成的数据求和场景。

场景描述

在网页开发中，我们经常会遇到需要对一组动态生成的数值进行求和的场景。例如，有一系列表格单元格（

标签），它们的id遵循特定的模式，例如id="total[1]", id="total[2]", id="total[3]"等，每个单元格内都包含一个数字。我们的目标是获取这些单元格内所有数字的总和。

<table>
 <td id="total[1]">200</td>
 <td id="total[2]">400</td>
 <td id="total[3]">500</td>
 <!-- 更多类似单元格 -->
</table>

jQuery解决方案核心

jQuery提供了一套强大而简洁的方法来处理DOM操作和数据提取。针对上述场景，我们可以利用其属性选择器和迭代功能来高效地完成求和任务。

*属性选择器 `[id='total']**: 这个选择器能够匹配所有ID属性中包含子字符串“total”的元素。这完美契合了total[1]、total[2]`这类ID模式。
.each() 方法: 选中所有符合条件的元素后，.each()方法允许我们遍历这些元素，并对每个元素执行指定的操作。
.text() 方法: 在遍历过程中，$(this).text()用于获取当前元素的文本内容。
parseFloat() 函数: 获取到的文本内容是字符串类型，需要使用parseFloat()将其转换为浮点数，以便进行数学计算。

完整示例代码

以下是一个完整的HTML和jQuery代码示例，展示了如何实现这一功能：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TD标签内容求和</title>
    <!-- 引入 jQuery 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

    <h1>TD标签内数值求和示例</h1>

    <table>
        <tr>
            <td id="total[1]">200</td>
            <td id="total[2]">400.50</td>
            <td id="total[3]">500</td>
            <td id="total[4]">150.25</td>
            <td id="total[5]">100</td>
        </tr>
        <tr>
            <!-- 假设还有其他行，或者这些td在不同行 -->
            <td id="total[6]">300</td>
        </tr>
    </table>

    <p>总和: <span id="ttl" style="font-weight: bold; color: blue;"></span></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2356">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/176118961795973.png" alt="青泥AI">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2356">青泥AI</a>
                            <p>青泥学术AI写作辅助平台</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="青泥AI">
                                <span>360</span>
                            </div>
                        </div>
                        <a href="/ai/2356" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="青泥AI">
                        </a>
                    </div>
                

    <script>
        // 确保DOM加载完成后执行脚本
        $(document).ready(function(){
            var Sum = 0; // 初始化总和变量

            // 遍历所有ID包含"total"的元素
            $("[id*=total]").each(function(){
                // 获取当前元素的文本内容，并转换为浮点数
                var value = parseFloat($(this).text());
                // 如果转换成功（不是NaN），则累加到总和
                if (!isNaN(value)) {
                    Sum += value;
                }
            });

            // 将计算出的总和显示在ID为"ttl"的span元素中
            $("#ttl").text(Sum.toFixed(2)); // 保留两位小数显示
        });
    </script>

</body>
</html>

代码解析

$(document).ready(function(){ ... });: 这是jQuery的最佳实践，确保在整个HTML文档加载并解析完毕后才执行内部的J*aScript代码，防止因DOM元素未加载而导致的选择器失败。
var Sum = 0;: 声明一个变量Sum并初始化为0，用于存储累加的总和。
*`$("[id=total]").each(function(){ ... });`**:
- $("[id*=total]")：选中所有ID属性中包含“total”子字符串的HTML元素。
- .each(function(){ ... })：对这些被选中的元素进行迭代。在每次迭代中，this关键字（或$(this)）指向当前的DOM元素。
var value = parseFloat($(this).text());:
- $(this).text()：获取当前元素的纯文本内容。
- parseFloat()：将获取到的字符串转换为浮点数。如果字符串不能被解析为数字，parseFloat()会返回NaN（Not-a-Number）。
- if (!isNaN(value)) { Sum += value; }: 这是一个健壮性检查。它确保只有当parseFloat()成功解析出数字时，才将其累加到Sum中，避免将NaN加入导致最终结果为NaN。
- $("#ttl").text(Sum.toFixed(2));:
  - $("#ttl")：选中ID为“ttl”的元素。
  - .text(Sum.toFixed(2))：将计算出的Sum值（通过toFixed(2)格式化为保留两位小数的字符串）设置为该元素的文本内容。