jQuery教程：如何高效汇总具有特定ID模式的TD标签数值
在前端开发中，我们经常会遇到需要统计表格中特定单元格数值的场景，比如统计所有ID以score_开头的<td>标签内的分数总和。如果使用原生JavaScript实现，需要遍历所有<td>元素、判断ID规则、提取数值再累加，代码量较多且逻辑繁琐。而借助jQuery的选择器和遍历方法，可以用更简洁的代码高效完成这个需求。
需求场景说明
假设我们有一个学生成绩表格，每个分数单元格的ID遵循score_学生ID的命名规则，比如score_1001、score_1002，现在需要统计所有这类单元格的分数总和。表格的基础结构如下：
<table border="1">
<thead>
<tr>
<th>学生ID</th>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>张三</td>
<td id="score_1001">85</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td id="score_1002">92</td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td id="score_1003">78</td>
</tr>
<tr>
<td colspan="3">总分：<span id="totalScore">0</span></td>
</tr>
</tbody>
</table><!-- 引入jQuery库，这里使用ipipp.com的CDN地址 -->
<script src="https://cdn.ipipp.com/jquery/3.6.0/jquery.min.js"></script>实现思路解析
要实现汇总需求，核心步骤分为三步：
- 使用jQuery的属性选择器匹配所有ID以
score_开头的<td>元素 - 遍历匹配到的元素，提取每个单元格内的文本内容并转换为数值
- 累加所有数值，最后将结果更新到总分展示的位置
完整实现代码
下面是完整的jQuery实现代码，包含详细的注释说明：
// 等待DOM加载完成后执行逻辑
$(document).ready(function() {
// 定义总分变量，初始化为0
let total = 0;
// 使用属性选择器匹配所有id以score_开头的td元素
// [id^='score_'] 表示id属性值以score_开头的元素
// 再用td标签过滤，确保只匹配td元素
$('td[id^="score_"]').each(function() {
// 当前遍历的td元素，使用$(this)获取jQuery对象
const $td = $(this);
// 获取单元格内的文本内容，去除前后空格
const scoreText = $td.text().trim();
// 将文本内容转换为数值，如果转换失败则默认为0
const score = Number(scoreText) || 0;
// 累加到总分
total += score;
});
// 将计算后的总分更新到id为totalScore的span元素中
$('#totalScore').text(total);
});代码关键点说明
1. 选择器的使用：$('td[id^="score_"]')是jQuery的属性选择器语法，^=表示匹配属性值以指定字符串开头的元素，这里精准匹配了所有ID符合score_前缀的<td>标签，避免了遍历无关元素，提升了执行效率。
2. 遍历方法：each()是jQuery提供的遍历方法，会依次处理匹配到的每一个元素，回调函数中的this指向当前原生DOM元素，用$(this)可以将其转换为jQuery对象，方便调用jQuery的方法。
3. 数值处理：使用Number(scoreText) || 0的方式转换数值，既可以处理内容为纯数字的情况，也能避免单元格内容为空或者非数字时导致的NaN问题，保证累加逻辑的正确性。
扩展场景适配
如果后续需求调整，比如需要统计ID以score_结尾的<td>标签，只需要修改选择器为$('td[id$="score_"]')即可，$=表示匹配属性值以指定字符串结尾的元素。如果需要匹配ID包含score_的<td>，则可以使用$('td[id*="score_"]')，*=表示属性值包含指定字符串。
通过jQuery的选择器和遍历方法，我们可以灵活应对不同ID模式的单元格统计需求，代码简洁且可维护性高，相比原生JavaScript实现减少了大量冗余逻辑。