原创投稿
  1. 创想鸟首页
  2. 用户投稿

动态表格中复选框选中行数值求和的JavaScript实现

程序猿 • • 用户投稿

动态表格中复选框选中行数值求和的JavaScript实现

本文详细介绍了如何在动态生成的html表格中，根据复选框的选中状态，实时计算并显示对应行特定列（如余额）的总和。文章提供了两种javascript实现方案：一种是基于dom遍历的修正方法，解决了原始代码的逻辑错误；另一种是更高效的数据属性（data-attribute）优化方法，通过将数值直接存储在复选框上，显著提升了性能和代码简洁性，并涵盖了html结构、php后端数据生成以及事件监听的完整实践。

动态表格行求和的挑战

在Web开发中，我们经常会遇到需要用户从一个动态生成的表格中选择多行，并实时计算这些选中行的某个数值总和的需求，例如计算选中发票的总金额。一个常见的挑战是，当用户选中或取消选中某个复选框时，JavaScript代码如何准确地识别出对应的行，并提取其数值进行累加。如果处理不当，可能会导致计算结果错误，例如累加了所有行的数值，或者按顺序累加而非按选中状态累加。

HTML结构与PHP数据生成

首先，我们需要一个基础的HTML表格结构，其中包含复选框和待求和的数值列。表格的行通常由后端语言（如PHP）从数据库动态生成。

HTML结构示例

选定发票总金额：AED 
0.00
      
            发票编号      日期      余额

PHP动态生成表格行

PHP代码负责从数据库查询数据，并将其格式化为HTML表格行。在生成复选框时，我们需要特别注意将余额值以可解析的数字格式（不含逗号等非数字字符）嵌入到复选框的某个属性中，以便JavaScript能够轻松获取。

<?php// 假设 $conn 是已建立的数据库连接$query = 'SELECT id, cinv_no, cinv_date, cinv_bal FROM invoices'; // 示例查询$sql = mysqli_query($conn, $query);while ($result = mysqli_fetch_array($sql)) {    $id = $result['id'];    $inv_no = $result['cinv_no'];    $inv_date = $result['cinv_date'];    $inv_bal = $result['cinv_bal'];    // 格式化余额用于显示，可能包含千位分隔符    $display_bal = number_format($inv_bal, 2);    // 格式化余额用于JavaScript计算，不含千位分隔符    $data_bal = number_format($inv_bal, 2, '.', ''); // 例如: 56842.50    echo '';    // 将 data-value 属性添加到复选框，存储不含逗号的余额值    echo '';    echo ''.$inv_no.'';    echo ''.date("d-m-Y", strtotime($inv_date)).'';    echo ''.$display_bal.'';    echo '';}?>

注意事项：

立即学习“Java免费学习笔记（深入）”；

number_format($cinv_bal, 2, ‘.’, ”) 用于确保 data-value 属性中的数值是标准浮点数格式，不含千位分隔符，方便JavaScript直接 parseFloat 解析。class=”balance” 用于显示余额的 元素，其内容可能包含千位分隔符，仅用于视觉展示。

JavaScript实现方案一：基于DOM遍历的修正

最初的JavaScript代码可能存在一个常见错误：在遍历选中的复选框时，错误地获取了所有余额元素，而不是当前复选框对应行的余额。

原始问题分析

假设有如下不正确的 updateSum 函数：

function updateSum() {  var total = 0;  var select = $(".checkbox:checked"); // 获取所有选中的复选框  var balance = $(".balance"); // 错误：获取了所有余额元素  select.each(function() {    // 这里依然会从所有 .balance 元素中取值，而不是当前复选框对应的行    total += parseFloat(balance.html().replace(/,/g, ''));  });  $(".totalsum").html(total.toFixed(2));}

问题在于 var balance = $(“.balance”); 这一行获取了页面上所有 class 为 balance 的元素。在 select.each() 循环中，balance.html() 始终会返回第一个 .balance 元素的内容，或者在某些jQuery版本中可能导致不确定的行为，但无论如何，它不会动态地指向当前复选框所在行的余额。

修正方案：相对DOM遍历

为了正确获取当前复选框对应行的余额，我们需要使用DOM遍历方法，从当前复选框出发，找到其父级

元素，再在该 内部查找 class=”balance” 的 元素。

function updateSum() {  var total = 0;  // 遍历所有被选中的复选框  $(".checkbox:checked").each(function() {    // 获取当前复选框的父级  元素，然后在其内部查找 class 为 'balance' 的 td    const balanceElement = $(this).parents('tr').find('.balance');    // 提取文本内容，移除千位分隔符，转换为浮点数并累加    total += parseFloat(balanceElement.text().replace(/,/g, ''));  });  $("#totalsum").text(total.toFixed(2)); // 更新总金额显示}// 全选/取消全选逻辑function selectAll(source) {  $('.checkbox').prop('checked', source.checked);  updateSum(); // 全选/取消全选后也需要更新总和}// 绑定事件$(document).ready(function() {  // 为所有单个复选框绑定点击事件  $('.checkbox').on('click', updateSum);  // 为全选复选框绑定点击事件  $('#selectAll').on('click', function() {    selectAll(this);  });});

代码解析：

$(this)：在 each 循环中指向当前被迭代的复选框。.parents(‘tr’)：向上查找当前复选框最近的 父元素。.find(‘.balance’)：在找到的 内部向下查找 class=”balance” 的元素。.text().replace(/,/g, ”)：获取 的文本内容，并移除所有逗号，确保 parseFloat 能正确解析。$(“#totalsum”).text(total.toFixed(2));：将计算结果格式化为两位小数并更新显示区域。

注意事项：这种方法虽然解决了问题，但在处理大量表格行时，频繁的DOM遍历操作可能会对性能产生一定影响。

JavaScript实现方案二：利用数据属性（data-attribute）优化性能

为了提高性能和代码的简洁性，我们可以采用一种更优的策略：将需要计算的余额值直接存储在复选框的 data- 属性中。这样，在JavaScript中，我们无需进行DOM遍历，可以直接从复选框自身获取数值。

HTML结构调整（PHP生成时）

如前文PHP代码所示，在生成复选框时，将余额值（不含千位分隔符）存储在 data-value 属性中：

    INV-2020-0001  31-05-2020  56,842.50

优化后的JavaScript代码

// 更新总金额的函数const updateTotal = () => {  const total = $(".checkbox:checked") // 获取所有被选中的复选框    .map((index, checkedCheckbox) => parseFloat(checkedCheckbox.dataset.value)) // 映射为每个复选框的 data-value 数值    .toArray() // 将jQuery对象转换为原生数组    .reduce((acc, cur) => acc + cur, 0); // 对数组中的所有数值进行累加  $('#totalsum').text(total.toFixed(2)); // 更新总金额显示};// 全选/取消全选的函数const toggleAll = (checked) => {  $('.checkbox').each((index, checkbox) => {    checkbox.checked = checked; // 设置每个复选框的选中状态  });};// 文档加载完成后绑定事件$(document).ready(function() {  // 为所有单个复选框绑定点击事件，每次点击后更新总金额  $('.checkbox').on('click', updateTotal);  // 为全选复选框绑定点击事件  $('#selectAll').on('click', function() {    toggleAll($(this).is(':checked')); // 根据全选框状态设置所有复选框    updateTotal(); // 更新总金额  });  // 页面加载时执行一次更新，确保初始显示正确  updateTotal();});

代码解析：

checkedCheckbox.dataset.value：直接访问HTML元素的 data-value 属性值。dataset 是一个DOMStringMap，包含了所有 data-* 属性。.map(…)：将选中的复选框集合转换为一个包含其 data-value 属性值的数组。.toArray()：将jQuery的集合对象转换为标准的JavaScript数组，以便使用 reduce 方法。.reduce((acc, cur) => acc + cur, 0)：对数组中的所有数值进行累加，0 是初始累加值。$(this).is(‘:checked’)：判断全选复选框当前是否被选中。事件绑定：将 updateTotal 和 toggleAll 函数与相应的点击事件绑定，确保用户操作时能够实时响应。

优势：

性能提升： 避免了在循环中进行DOM遍历，直接从元素的属性获取数据，效率更高。代码简洁： 利用 map 和 reduce 等现代JavaScript数组方法，代码更加声明式和易读。数据隔离： 将数据与DOM结构分离，使得HTML更专注于结构，JavaScript更专注于行为。

总结与最佳实践

本文介绍了两种在动态表格中根据复选框选中状态计算行总和的JavaScript实现方案。

基于DOM遍历的修正方案：解决了原始代码中定位元素不准确的问题，通过 parents().find() 确保获取到的是当前选中复选框对应行的数值。此方案适用于数据量不大或对性能要求不极致的场景。

利用数据属性（data-attribute）的优化方案：通过将数值直接存储在复选框的 data-value 属性中，避免了DOM遍历，显著提升了性能和代码的简洁性。这是一种更推荐的实践，尤其是在处理大量数据或对用户体验有较高要求的应用中。

最佳实践建议：

数据存储： 尽可能将与计算相关的数据直接存储在HTML元素的 data-* 属性中，减少不必要的DOM查询。数值处理： 在将数值从HTML文本中提取或存储到 data-* 属性时，务必进行严格的格式化，确保 parseFloat 等函数能正确解析，避免因千位分隔符等非数字字符导致的错误。事件管理： 使用jQuery的 .on() 方法进行事件绑定，可以更好地管理事件，尤其是在动态添加元素时。代码组织： 将相关功能封装到独立的函数中（如 updateTotal, toggleAll），提高代码的可读性和可维护性。初始状态： 确保在页面加载完成后，执行一次总金额的计算和显示，以反映初始的选中状态。

通过采纳这些方法和建议，您可以构建出高效、健壮且用户友好的动态表格行求和功能。

以上就是动态表格中复选框选中行数值求和的JavaScript实现的详细内容，更多请关注php中文网其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1593673.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
网站所有权验证文件：识别、作用与管理指南
上一篇 2025年12月23日 08:46:32
JavaScript动态内容更新：解决图片元素未刷新的命名冲突问题
下一篇 2025年12月23日 08:46:44

相关推荐

  • 如何利用 Composer 解决 PHP 项目中的旧版库依赖问题

    在我的项目中，karelwintersky/steamboatengine 最后一次使用是在 doctorpiter 项目中，版本为 1.3.6。虽然这个库已经不再维护，但我仍然需要它来保持项目的正常运行。然而，继续使用一个已废弃的库显然不是长久之计。 首先，我决定通过 Composer 来管理这个…

    程序猿的头像 程序猿
    用户投稿 2026年9月2日
    000
  • 掌握HTML、CSS、JS、PHP、MySQL等技能，毕业生前端开发就业前景如何？ 用户投稿

    掌握HTML、CSS、JS、PHP、MySQL等技能，毕业生前端开发就业前景如何？

    掌握HTML、CSS、JavaScript、XAMPP、PHP和MySQL技能的毕业生，在前端开发领域的前景如何？ 临近毕业，许多学生都面临着就业压力，技术水平直接影响着求职成功率。这位同学具备HTML、CSS、JavaScript、XAMPP、PHP和MySQL技能，能够独立完成前后端网站开发，但…

    程序猿的头像 程序猿
    2026年9月2日
    000
  • mysql建表怎么添加注释 用户投稿

    mysql建表怎么添加注释

    在mysql中，可以使用“create table”语句和comment关键字来在建表时添加注释，语法“create table 表名 (字段名 字段类型 comment ‘字段的注释’)comment=’表注释’;”。 本教程操作环境：windows…

    程序猿的头像 程序猿
    2026年9月2日
    000
  • 如何确保多次请求的设备坐标数据在数据库中持久存储？ 用户投稿

    如何确保多次请求的设备坐标数据在数据库中持久存储？

    高效存储设备轨迹数据：数据库持久化策略 在处理频繁的设备坐标数据请求时，如何确保数据完整且高效地存储到数据库中至关重要。本文将探讨两种策略，并分析其适用场景。 两种存储方案对比 字符串拼接法： 将每次请求的坐标数据拼接成一个字符串，达到一定长度后写入数据库。这种方法简单易懂，但对于高频数据请求，拼接…

    程序猿的头像 程序猿
    2026年9月2日
    400

  • 如何使用 Composer 解决 OpenEMR 的传真和短信需求

    可以通过一下地址学习composer：学习地址 在使用 OpenEMR 管理医疗信息时，我遇到了一个棘手的问题：系统需要支持传真和短信功能，但 Twilio 已经停止了对其传真 API 的支持。这导致原有的传真功能无法使用，虽然 Twilio 的短信功能依然可用，但传真功能的缺失使我不得不寻找替代方…

    程序猿的头像 程序猿
    用户投稿 2026年9月2日
    000
  • mysql中是什么意思 用户投稿

    mysql中是什么意思

    在mysql中，“”的意思为“安全等于”，是一个比较运算符，和“=”等于运算符类似，不过“”可以用来判断NULL值：当两个操作数均为NULL时，其返回值为1而不为NULL；而当一个操作数为NULL时，其返回值为0而不为NULL。 本教程操作环境：windows7系统、mysql8版本、Dell G3…

    程序猿的头像 程序猿
    2026年9月2日
    100
  • mysql条件查询语句是什么 用户投稿

    mysql条件查询语句是什么

    在mysql中，可以使用SELECT语句和WHERE关键字来实现条件查询，实现语句为“SELECT 字段名 FROM 数据表 WHERE 查询条件;”；SELECT语句用于查询数据，而WHERE关键字用于指定查询条件。 本教程操作环境：windows7系统、mysql8版本、Dell G3电脑。 在…

    程序猿的头像 程序猿
    2026年9月2日
    100

  • MySQL如何实现权限管理_怎么设置最安全的权限？

    MySQL如何实现权限管理_怎么设置最安全的权限？MySQL如何实现权限管理_怎么设置最安全的权限？MySQL如何实现权限管理_怎么设置最安全的权限？MySQL如何实现权限管理_怎么设置最安全的权限？

    mysql权限管理的核心在于遵循最小权限原则、精细化控制权限范围并定期审查清理权限。1. 设置最安全权限需遵循最小化原则，仅授予用户必要权限，如为web应用创建专用账户并限制其操作范围；2. 利用mysql的细粒度权限控制功能，可按数据库、表、列甚至主机进行限制，例如限制用户只能查询特定字段或从内网…

    程序猿的头像 程序猿
    2026年9月2日 • 用户投稿
    000

  • 让人心动的mysql体系结构和InnoDB存储引擎知识详解

    让人心动的mysql体系结构和InnoDB存储引擎知识详解让人心动的mysql体系结构和InnoDB存储引擎知识详解让人心动的mysql体系结构和InnoDB存储引擎知识详解让人心动的mysql体系结构和InnoDB存储引擎知识详解

    本篇文章给大家带来了mysql进阶之体系结构和innodb存储引擎的相关知识，希望对大家有帮助。 MySQL基本架构图 大体来说，MySQL 可以分为 Server 层和存储引擎层两部分。 Server 层包括连接器、查询缓存、分析器、优化器、执行器等，涵盖 MySQL 的大多数核心服务功能，以及所…

    程序猿的头像 程序猿
    2026年9月2日 • 用户投稿
    100
  • VSCode里怎么卸载TS_VSCode移除TypeScript及相关依赖包教程 用户投稿

    VSCode里怎么卸载TS_VSCode移除TypeScript及相关依赖包教程

    答案：彻底卸载TypeScript需禁用VSCode内置服务、卸载相关扩展并清理项目与全局的TypeScript包。首先在设置中调整typescript.tsdk路径或禁用自动类型获取，将.ts文件关联为纯文本；其次通过扩展面板卸载所有TypeScript相关插件；最后删除项目中的typescrip…

    程序猿的头像 程序猿
    2026年9月2日
    000

  • 标题: 如何使用 Composer 简化百度小程序开发：houyingcai/baidu-mini-sdk 的应用

    可以通过一下地址学习composer：学习地址 文章内容 在开发百度智能小程序的过程中，我遇到了一个棘手的问题：百度官方尚未发布完整的PHP SDK，仅有的百度收银台SDK也只支持生成和验证签名，无法满足实际开发需求。面对这种情况，我尝试了多种方法，最终找到了houyingcai/baidu-min…

    程序猿的头像 程序猿
    用户投稿 2026年9月2日
    000
  • mysql怎么将数据转为16进制 用户投稿

    mysql怎么将数据转为16进制

    mysql转16进制的方法：1、使用hex()函数，语法“select hex(十进制值);”，可将十进制转为十六进制；2、使用conv()函数，语法“select conv(‘数据值’,原进制,16);”，可将任意进制转为16进制。 本教程操作环境：windows7系统、m…

    程序猿的头像 程序猿
    2026年9月2日
    000
  • VSCode怎么写CSS文件_VSCode创建和编写CSS样式表的详细方法与技巧教程 用户投稿

    VSCode怎么写CSS文件_VSCode创建和编写CSS样式表的详细方法与技巧教程

    首先在VSCode中创建CSS文件并编写样式，利用IntelliSense和Emmet实现智能补全与高效编码；接着通过模块化文件结构和扩展如CSS Peek管理大型项目；最后结合Live Server实时预览和浏览器开发者工具联动调试，提升CSS开发效率。 VSCode中编写CSS文件远比你想象的要…

    程序猿的头像 程序猿
    2026年9月2日
    100
  • 后台管理页面跳转：如何优雅地保留搜索表单参数？ 用户投稿

    后台管理页面跳转：如何优雅地保留搜索表单参数？

    后台管理系统页面跳转时如何优雅地保留搜索表单参数？本文探讨几种优于直接拼接URL参数的解决方案，提升用户体验和代码可维护性。 在后台管理系统中，数据展示页（A页）与数据新增/编辑页（B页）间的跳转常常需要保留A页的搜索条件。直接在URL中拼接参数虽然简单，但可维护性和可读性差，尤其在多个跳转场景下。…

    程序猿的头像 程序猿
    2026年9月2日
    000
  • mysql中as的用法是什么 用户投稿

    mysql中as的用法是什么

    在mysql中，“as”关键字用于为数据表和字段指定别名，语法：1、“SELECT 字段名 AS 别名 FROM 数据表;”，可为字段指定别名；2、“SELECT 字段名 FROM 数据表 AS 别名;”，可为表指定别名。 本教程操作环境：windows7系统、mysql8版本、Dell G3电脑。…

    程序猿的头像 程序猿
    2026年9月2日
    000
  • Swoole怎么在不重启服务的情况下更新配置 用户投稿

    Swoole怎么在不重启服务的情况下更新配置

    答案：Swoole通过信号机制、配置中心定时检查、管理接口触发实现配置热加载，需注意多进程同步与性能优化。 在使用 Swoole 时，想要在不重启服务的情况下更新配置，核心思路是利用进程间通信机制实现配置热加载。Swoole 提供了信号机制和自定义事件，可以结合这些特性动态重载配置。 1. 使用信号…

    程序猿的头像 程序猿
    2026年9月2日
    200
  • mysql要如何删数据库 用户投稿

    mysql要如何删数据库

    在mysql中，可以利用“DROP DATABASE”语句来删除数据库，具体语法格式为“DROP DATABASE [IF EXISTS] 数据库名;”；可选子句“IF EXISTS”，用于防止当数据库不存在时发生错误。 本教程操作环境：windows10系统、mysql8版本、Dell G3电脑。…

    程序猿的头像 程序猿
    2026年9月2日
    000
  • 如何高效地对后台返回数据进行二次排序，实现前端相邻数据展示？ 用户投稿

    如何高效地对后台返回数据进行二次排序，实现前端相邻数据展示？

    前端数据排序：实现相邻数据展示 前端开发中，经常需要对后台返回的数据进行二次排序，以满足特定的展示需求。本文将介绍如何处理异步获取的数据，并按照appeal_type和detail_appeal_type字段进行排序，确保相同类型的数据相邻显示。 问题：后台返回的JSON数据已按staff字段排序，…

    程序猿的头像 程序猿
    2026年9月2日
    100

  • mysql学习之select查询语句到底是怎么执行的？

    mysql学习之select查询语句到底是怎么执行的？mysql学习之select查询语句到底是怎么执行的？mysql学习之select查询语句到底是怎么执行的？mysql学习之select查询语句到底是怎么执行的？

    本篇文章给大家带来了关于mysql中select语句执行的相关知识，其中包括了连接器、分析器、优化器和执行器，希望对大家有帮助。 mysql 作为一个关系型数据库，在国内使用应该是最广泛的。也许你司使用 Oracle、Pg 等等，但是大多数互联网公司，比如我司使用得最多的还是 Mysql，重要性不言…

    程序猿的头像 程序猿
    2026年9月2日 • 用户投稿
    200

  • 一文总结Mysql数据库应用及常见问题

    Mysql数据库应用与常见问题 一、安装mysql 1、CentOS系统 1.）安装mysql 下载并安装mysql的repo源 $ wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm$ sudo rpm -ivh …

    程序猿的头像 程序猿
    用户投稿 2026年9月2日
    200

发表回复

登录后才能评论
关注微信