使用 jQuery 统计带有特定 ID 模式的 TD 标签中的数值总和-html教程-PHP中文网

使用 jQuery 统计带有特定 ID 模式的 TD 标签中的数值总和

花韻仙語

发布： 2025-10-10 13:02:59

原创

384人浏览过

使用 jquery 统计带有特定 id 模式的 td 标签中的数值总和

本文旨在介绍如何使用 jQuery 选取具有特定 ID 模式（例如 total[1], total[2], total[3]）的 <td> 标签，并计算其中数值的总和。我们将提供一个简洁的 jQuery 代码示例，展示如何遍历这些标签，提取数值，并最终显示总和。

使用 jQuery 计算 TD 标签数值总和

在网页开发中，经常会遇到需要动态计算表格数据总和的需求。如果这些数据分布在具有特定 ID 模式的 <td> 标签中，例如 total[1], total[2], total[3] 等，那么可以使用 jQuery 方便地实现这个功能。

实现步骤：

引入 jQuery 库: 首先，确保你的 HTML 页面中已经引入了 jQuery 库。你可以从官方网站下载，或者使用 CDN 链接：
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```
登录后复制
编写 jQuery 代码: 接下来，编写 jQuery 代码来实现数值总和的计算。代码应该包含以下几个步骤：
- 等待文档加载完成。
- 初始化一个变量用于存储总和。
- 使用选择器选取所有 ID 包含 "total" 的 <td> 标签。
- 遍历选取的标签，提取其中的数值，并将其累加到总和变量中。
- 将总和显示在指定的 HTML 元素中。
以下是一个完整的 jQuery 代码示例：
```
$(document).ready(function(){
    var Sum = 0;
    $("[id*=total]").each(function(){
        Sum += parseFloat($(this).text());
    });
    $("#ttl").text(Sum);
});
```
登录后复制
代码解释：

慧中标AI标书
慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情
- $(document).ready(function(){ ... }); 确保在文档加载完成后执行代码。
- var Sum = 0; 初始化一个名为 Sum 的变量，用于存储总和，初始值为 0。
- $("[id*=total]") 使用属性选择器 [id*=total] 选取所有 ID 包含 "total" 的元素。 *= 表示包含的意思。
- .each(function(){ ... }); 遍历选取的每一个元素。
- $(this).text() 获取当前元素的文本内容。
- parseFloat($(this).text()) 将文本内容转换为浮点数。parseFloat() 函数用于将字符串转换为浮点数，如果无法转换，则返回 NaN (Not a Number)。
- Sum += parseFloat($(this).text()); 将转换后的数值累加到 Sum 变量中。
- $("#ttl").text(Sum); 将计算得到的总和 Sum 显示在 ID 为 "ttl" 的元素中。
HTML 结构: 为了让代码正常工作，你需要提供相应的 HTML 结构。以下是一个示例：
```
<table>
 <td id="total[1]">200<td>
 <td id="total[2]">400<td>
 <td id="total[3]">500<td>
</table>
Total: <span id="ttl"></span>
```
登录后复制
在这个例子中，我们使用了一个 <table> 元素，其中包含多个 <td> 标签，它们的 ID 分别为 total[1], total[2], total[3]。我们还添加了一个 <span> 标签，其 ID 为 "ttl"，用于显示计算得到的总和。

完整示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Sum of TD Values</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      var Sum = 0;
      $("[id*=total]").each(function(){
        Sum += parseFloat($(this).text());
      });
      $("#ttl").text(Sum);
    });
  </script>
</head>
<body>
  <table>
   <td id="total[1]">200<td>
   <td id="total[2]">400<td>
   <td id="total[3]">500<td>
  </table>
  Total: <span id="ttl"></span>
</body>
</html>

登录后复制

注意事项: