使用 jQuery 统计带有特定 ID 模式的 TD 标签中的数值总和
在网页开发中，我们经常会遇到需要统计表格中特定单元格数值总和的需求。比如表格中部分单元格的 ID 遵循固定命名规则，我们需要快速筛选出这些单元格，提取其中的数值并计算总和。使用 jQuery 可以很方便地实现这个需求，下面我们就来一步步实现这个功能。
实现思路
整个功能的实现可以分为三个核心步骤：
- 使用 jQuery 的属性选择器筛选出 ID 符合特定模式的 <td> 标签
- 遍历筛选出的单元格，提取其中的文本内容并转换为数值
- 累加所有数值得到最终的总和，最后将结果展示在页面上
基础 HTML 结构
首先我们先准备一个包含目标单元格的表格结构，这里我们假设需要统计 ID 以 score_ 开头的 <td> 标签中的数值，示例结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>数值统计示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>姓名</th>
<th>语文成绩</th>
<th>数学成绩</th>
<th>英语成绩</th>
</tr>
<tr>
<td>张三</td>
<td id="score_1">92</td>
<td id="score_2">88</td>
<td id="score_3">95</td>
</tr>
<tr>
<td>李四</td>
<td id="score_4">85</td>
<td id="score_5">90</td>
<td id="score_6">87</td>
</tr>
<tr>
<td>王五</td>
<td id="score_7">78</td>
<td id="score_8">82</td>
<td id="score_9">91</td>
</tr>
<tr>
<td>无关单元格</td>
<td id="other_1">100</td>
<td id="other_2">200</td>
</tr>
</table>
<p>所有成绩总和为：<span id="totalScore">0</span></p>
<button id="calcBtn">计算总和</button>
</body>
</html>上面的表格中，前三个学生的成绩单元格 ID 都以 score_ 开头，最后一行两个单元格 ID 以 other_ 开头，我们后续会筛选出前者进行统计，排除后者。
jQuery 统计逻辑实现
接下来我们编写 jQuery 代码，实现筛选、提取值、计算总和的功能：
$(function() {
// 给计算按钮绑定点击事件
$('#calcBtn').on('click', function() {
// 定义总和初始值
let total = 0;
// 使用属性选择器筛选ID以score_开头的td标签
// ^ 表示匹配开头，所以 [id^="score_"] 就是选中id以score_开头的元素
$('td[id^="score_"]').each(function() {
// 获取当前单元格的文本内容
let cellText = $(this).text().trim();
// 将文本转换为数值，如果转换失败则默认为0
let cellValue = parseFloat(cellText) || 0;
// 累加数值到总和
total += cellValue;
});
// 将计算出的总和展示到页面
$('#totalScore').text(total);
});
});这里我们使用了 jQuery 的属性开头匹配选择器 [id^="score_"]，它可以精准匹配到所有 ID 以 score_ 开头的 <td> 元素，避免选中其他不符合规则的单元格。遍历过程中使用 parseFloat 转换文本内容为数值，同时做了容错处理，如果单元格内容不是有效数字，就按 0 计算，避免统计出错。
功能测试与扩展
将上述 HTML 和 jQuery 代码结合后，点击页面上的「计算总和」按钮，就可以得到所有 ID 以 score_ 开头的 <td> 标签中数值的总和。我们示例中的数据总和是 92+88+95+85+90+87+78+82+91=788，点击按钮后页面会正确显示这个结果。
如果需要匹配其他 ID 模式，只需要修改选择器中的匹配规则即可，比如要匹配 ID 以 num_ 结尾的单元格，就把选择器改成 td[id$="num_"]，$ 表示匹配结尾；如果要匹配 ID 中包含 data 的单元格，就改成 td[id*="data"]，* 表示匹配任意位置包含指定字符串的情况。
注意事项
- 确保页面已经正确引入 jQuery 库，否则代码会无法执行
- 如果单元格中除了数值还有其他文本内容，需要先做清洗处理，比如去掉单位、文字等，再转换数值
- 如果统计的单元格数量很多，建议避免频繁操作 DOM，可以先将所有值提取到数组后再统一计算，提升性能