在web开发中，经常会遇到需要对html表格中的数值进行求和的场景，特别是当这些<td>元素是动态生成且其id属性遵循某种数组或序列模式（例如id="total[1]", id="total[2]"等）时。虽然直接通过完整id选择元素是可行的，但对于这类模式化的id，jquery提供了更灵活且高效的解决方案。本文将指导您如何利用jquery的强大功能，轻松实现这一数据汇总任务。
要汇总具有特定ID模式（如total[n]）的<td>标签内的数值，我们可以利用jQuery的属性选择器[attribute*=value]。这个选择器能够匹配所有指定属性包含特定子字符串的元素。在本例中，[id*=total]将选择所有id属性中包含“total”子字符串的元素。一旦选中这些元素，我们就可以通过迭代（.each()方法）来获取每个元素的文本内容，将其转换为数字，并累加到总和中。
以下是实现此功能的jQuery代码示例：
$(document).ready(function(){
var totalSum = 0; // 初始化一个变量用于存储总和
// 选中所有ID包含"total"子字符串的元素，并对每个元素执行函数
$("[id*=total]").each(function(){
// 获取当前元素的文本内容，并尝试将其转换为浮点数
var value = parseFloat($(this).text());
// 检查转换后的值是否为有效数字（不是NaN），然后累加
if (!isNaN(value)) {
totalSum += value;
}
});
// 将计算出的总和显示在ID为"ttl"的元素中
$("#ttl").text(totalSum);
});为了演示上述jQuery代码的实际应用，我们需要一个包含目标<td>元素的HTML结构，以及一个用于显示最终总和的占位符元素。
<!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库，通常放在<head>或<body>结束标签前 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h2>商品价格列表</h2>
<table>
<thead>
<tr>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr><td>商品A</td><td id="total[1]">200</td></tr>
<tr><td>商品B</td><td id="total[2]">400</td></tr>
<tr><td>商品C</td><td id="total[3]">500</td></tr>
<tr><td>商品D</td><td id="total[4]">350</td></tr>
<!-- 更多类似的td元素 -->
</tbody>
</table>
<p>总计: <span id="ttl"></span></p>
<!-- 将上面的jQuery代码放置在此处，确保在DOM元素加载后执行 -->
<script>
$(document).ready(function(){
var totalSum = 0;
$("[id*=total]").each(function(){
var value = parseFloat($(this).text());
if (!isNaN(value)) {
totalSum += value;
}
});
$("#ttl").text(totalSum);
});
</script>
</body>
</html>$(document).ready(function(){ ... });: 这是jQuery的经典用法，确保在整个HTML文档（包括所有DOM元素）加载并解析完毕后才执行内部的JavaScript代码。这可以避免因尝试操作尚未存在的DOM元素而导致的错误。
var totalSum = 0;: 初始化一个名为totalSum的JavaScript变量，用于累加所有<td>标签中的数值。将其初始化为0是标准做法。
*`$("[id=total]")`**: 这是实现核心功能的关键部分。
.each(function(){ ... });: 这是一个jQuery迭代方法，用于遍历通过选择器匹配到的每一个元素。对于每个匹配到的元素，它都会执行一次传入的函数。在函数内部，this关键字引用当前的DOM元素，而$(this)则将其包装成一个jQuery对象，以便使用jQuery的方法。
$(this).text(): 获取当前迭代到的<td>元素的文本内容。例如，如果<td>是<td id="total[1]">200</td>，则$(this).text()将返回字符串"200"。
parseFloat($(this).text()): 将从<td>中获取到的字符串文本内容转换为浮点数。这一步至关重要，因为从DOM元素中提取的数据通常是字符串类型，不能直接进行数学运算。parseFloat()函数能够解析包含小数点的数字字符串。如果字符串不是以数字开头，或者无法解析为数字，它将返回NaN（Not-a-Number）。
if (!isNaN(value)) { totalSum += value; }: 这是一个健壮性检查。isNaN()函数用于判断一个值是否为NaN。通过!isNaN(value)，我们确保只有当value是一个有效的数字时，才将其累加到totalSum中。这可以有效避免因<td>中包含非数字内容（如空字符串、文本描述等）而导致总和计算出错。
$("#ttl").text(totalSum);: 最后一步是将计算得到的totalSum显示在页面上。$("#ttl")通过ID选择器选中了ID为ttl的<span>元素，然后.text(totalSum)方法将totalSum的值设置为该<span>元素的文本内容，从而在页面上展示最终的汇总结果。
本教程详细阐述了如何利用jQuery的属性选择器[id*=value]结合.each()方法，高效地汇总HTML中具有特定ID模式的<td>标签内的数值。这种方法不仅代码简洁、易于理解和维护，而且在处理动态生成的表格数据时表现出极大的灵活性。通过遵循文中提供的代码示例和注意事项，开发者可以轻松地将此功能集成到自己的Web应用程序中，实现动态数据统计和展示。
以上就是jQuery教程：如何高效汇总具有特定ID模式的TD标签数值的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
678
收藏
