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

程序猿 • 2025年12月23日 08:46:35 • 好文分享 • 阅读 0

本文详细介绍了如何在动态生成的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

关于作者

程序猿签约作者

400.4K 文章

0 评论

1 粉丝

这个人很懒，什么都没有留下～

网站所有权验证文件：识别、作用与管理指南

上一篇 2025年12月23日 08:46:32

JavaScript动态内容更新：解决图片元素未刷新的命名冲突问题

下一篇 2025年12月23日 08:46:44

JavaScript动态内容更新：解决图片元素未刷新的命名冲突问题

本文深入探讨了javascript中动态更新内容时，图片元素未能正确刷新的常见问题。核心原因在于自定义函数参数与全局dom元素引用之间存在的命名冲突，导致图片src属性赋值操作指向了错误的变量。通过重命名函数参数以避免变量遮蔽，可以有效解决此问题，确保页面所有内容（包括图片）能够同步且准确地更新。 …

程序猿
好文分享 2025年12月23日
0000
好文分享

网站所有权验证文件：识别、作用与管理指南

在网站根目录中发现随机命名的`.html`文件，内容仅为其文件名？这类文件通常是第三方服务（如google search console）用于验证网站或域名所有权的凭证。它们是安全且必要的，允许服务确认您对网站的控制权。了解其作用有助于有效管理网站资产。网站所有权验证文件的核心概念在管理网站时，…

程序猿
2025年12月23日
0000
好文分享

JavaScript中基于data-price属性的正确数值排序指南

当尝试根据html元素的`data-price`属性（存储为字符串）进行价格排序时，javascript的默认比较操作会按字典顺序处理，导致“20”被错误地排在“5”之前。本教程将详细解释此原因，并提供将字符串属性转换为数字进行精确排序的解决方案，确保商品列表按预期升序或降序排列。在开发Web应用…

程序猿
2025年12月23日
0000
好文分享

使用CSS Flexbox实现两列水平对齐布局

本教程详细介绍了如何利用CSS Flexbox模型解决在同一父容器内两列内容水平对齐的常见布局问题。通过将父容器设置为Flex容器，并合理运用justify-content和align-items等属性，可以轻松实现响应式且结构清晰的两列布局，告别传统浮动布局的复杂性，显著提升开发效率和布局的灵活性…

程序猿
2025年12月23日
0000
好文分享

实现响应式叠加图片布局：Flexbox与负外边距技巧

本教程将详细介绍如何利用css flexbox布局和负外边距技术，创建在桌面和移动设备上都能优雅展现的响应式图片叠加效果。通过优化html结构和精细调整css属性，实现图片间的视觉交错，确保布局在不同屏幕尺寸下保持良好可读性和视觉一致性。在现代网页设计中，创建富有视觉层次感的布局是提升用户体验的关…

程序猿
2025年12月23日
0000
好文分享

为处于:active状态的父元素子元素应用样式

本教程详细阐述了如何在CSS中为处于`:active`状态的父元素的特定子元素应用样式。文章通过一个实际的按钮点击案例，指出并纠正了在选择器中遗漏类名前缀“.”这一常见错误，并提供了正确的CSS代码示例和解释，旨在帮助开发者准确理解并实现复杂的CSS状态样式控制。在前端开发中，我们经常需要根据用户…

程序猿
2025年12月23日
0000
好文分享

CSS选择器：精准定位父级末尾子元素，避免嵌套干扰

本文深入探讨了在css中如何精准选择特定父元素的最后一个直接子元素，同时避免误选嵌套子元素的问题。通过分析`:last-child`和`:last-of-type`的局限性，文章详细介绍了使用直接子选择器`>`结合`:last-child`的解决方案，并通过代码示例和注意事项，帮助开发者有效控…

程序猿
2025年12月23日
0000
好文分享

怎么使用HTML在线分页组件_HTML在线分页组件使用方法与数据分页方案

答案：使用HTML在线分页需结合前端结构与后端数据控制，通过基础HTML构建分页按钮，CSS美化样式，JavaScript实现前端动态分页，或以后端接口支持大数据分页，配合现成组件库提升效率。使用HTML在线分页组件，核心在于结合前端结构与后端数据控制，实现用户友好、高效加载的分页功能。虽然HTM…

程序猿
2025年12月23日
0000
好文分享

优化纯JavaScript双标签页切换与内容显示教程

本教程详细阐述如何使用纯%ignore_a_1%高效实现双标签页的切换功能，包括管理标签页的激活状态和内容的显示/隐藏。通过优化dom操作和采用清晰的css类管理，我们将解决常见的问题，如内容显示冲突，并提供简洁、可维护的代码实践，确保在纯javascript环境下实现流畅的用户体验。在Web开发…

程序猿
2025年12月23日
0000
好文分享

html中如何点击_HTML点击事件（onclick）绑定与交互处理方法

答案：HTML中处理点击事件最常用的是onclick属性和addEventListener方法。onclick直接在HTML标签内绑定JavaScript代码，适合简单交互，但不利于维护；而addEventListener通过JavaScript分离结构与行为，支持多事件监听、事件冒泡控制及事件委托…

程序猿
2025年12月23日
0000
好文分享

如何在Django模板中有效清除表单数据与变量

本教程探讨Django应用中表单数据在页面刷新后可能持续显示的问题，并提供一套综合解决方案。我们将深入分析服务器端视图逻辑，确保数据上下文的正确管理，并通过客户端JavaScript技术辅助清除表单字段，从而实现页面状态的精准控制。在Django Web开发中，开发者有时会遇到这样的情况：用户在表…

程序猿
2025年12月23日
0000
好文分享

捕获HTML表单提交的原始页面URL教程

本文详细介绍了如何在HTML表单提交时，通过客户端JavaScript捕获并发送表单所在的当前页面URL。教程将指导您如何利用隐藏的表单字段和JavaScript的`submit`事件监听器，在表单数据发送前动态填充URL信息，从而为服务器端提供关键的页面上下文数据。 1. 简介在网页应用开发中，…

程序猿
2025年12月23日
0000
好文分享

Django页面刷新后数据残留清除策略

本文旨在解决Django应用中，用户提交表单后刷新页面，导致之前输入的数据仍然显示在HTML元素中的问题。我们将深入分析数据残留的原因，并提供两种主要解决方案：一是采用服务器端的PRG（Post/Redirect/Get）模式，防止数据在重定向后被重新渲染；二是利用客户端JavaScript，实现用…

程序猿
2025年12月23日
0000
好文分享

JavaScript DOM操作：在父元素子列表顶部插入新元素的方法

本文详细探讨了javascript中向dom父元素添加子元素的不同方法。针对appendchild默认将元素添加到列表末尾的问题，我们将介绍如何利用prepend()方法将新元素插入到子元素列表的起始位置，从而实现更灵活的dom操作，并提供实际代码示例。在Web开发中，动态地创建和操作DOM元素是…

程序猿
2025年12月23日
0000
好文分享

优化CSS Grid与Flexbox混合布局的响应式表现

本教程旨在解决css grid布局中flexbox内容在小屏幕下失去响应性的问题。核心原因在于固定高度容器与错误的flexbox方向设置限制了内容的自适应能力。通过将固定高度替换为最小高度、调整flex容器的方向为行，并利用flex属性为子项提供伸缩能力，可以实现内容在多种屏幕尺寸下流畅且响应式的多…

程序猿
2025年12月23日
0000
动态控制iFrame内容与可见性：基于User-Agent的实现指南

本文详细阐述了如何利用javascript的`navigator.useragent`和`navigator.vendor`属性，根据用户设备类型（如移动端、桌面端）及浏览器（如android、ios、safari）动态加载不同的内容到` 引言：iFrame与动态内容的需求在现代网页开发中，本文…

程序猿
2025年12月23日 • 好文分享
0000
Moodle自定义消息发送：实现、注册与常见问题排查

本教程详细阐述了在moodle中实现自定义消息发送的完整流程，包括消息提供者的注册、消息对象的构建以及发送消息的核心api调用。文章还深入分析了常见的消息发送失败原因，并提供了具体的排查步骤，特别强调了检查moodle站点消息通知设置的重要性，确保消息能够成功送达目标用户。在Moodle平台中，开…

程序猿
2025年12月23日 • 好文分享
0000
好文分享

解决CSS :hover过渡不生效问题：实现Div卡片平滑上移效果

本文旨在解决css悬停（:hover）效果中过渡动画不生效的常见问题。当为`div`卡片设置鼠标悬停上移效果时，若`transition`属性被错误地放置在`:hover`选择器内，将导致动画瞬间完成。正确的做法是将`position`和`transition`属性定义在元素的默认状态（非`:hov…

程序猿
2025年12月23日
0000
好文分享

HTML中正确链接CSS样式表：文件路径详解与常见错误规避

本文详细阐述了如何在html文档中正确链接css样式表，重点解析了“标签的用法及其关键属性。文章深入探讨了不同类型的文件路径，特别是针对同级目录文件链接时易犯的路径错误（如多余的斜杠），并提供了清晰的示例代码和注意事项，旨在帮助开发者确保css样式能准确无误地应用于网页，提升开发效率。 …

程序猿
2025年12月23日
0000
好文分享

实现点击外部区域隐藏侧边栏的交互教程

本教程详细介绍了如何利用javascript和jquery实现点击页面外部区域时自动隐藏侧边栏的功能。通过巧妙运用事件委托和阻止事件冒泡机制，确保用户在点击侧边栏外部时能流畅地将其关闭，从而优化用户界面体验。文章提供了具体的代码示例，并解释了关键的实现原理和注意事项。在现代网页设计中，侧边栏（Si…

程序猿
2025年12月23日
0000