动态表格复选框值求和教程

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

本教程详细介绍了如何处理动态生成的html表格中，根据用户勾选的复选框来计算对应行特定列（如余额）的总和。文章首先分析了常见错误，随后提供了两种解决方案：一种是修正dom元素选择逻辑，确保只计算选中行的值；另一种是更高效的方法，通过将数值直接存储在复选框的`data`属性中，从而优化计算性能，并给出了完整的html、php和javascript代码示例及最佳实践。

动态表格与复选框求和概述

在Web开发中，经常需要处理用户交互界面，例如在一个包含多行数据的表格中，允许用户选择特定行并对这些行的数据进行汇总计算。一个典型的场景是计算用户选中的发票或商品的余额总和。本教程将以一个动态生成的发票列表为例，详细讲解如何实现这一功能，并提供两种有效的JavaScript（结合jQuery）解决方案。

初始HTML结构与PHP动态生成

首先，我们需要一个基本的HTML表格结构，其中包含一个用于显示总和的区域，以及一个用于全选的复选框。表格的行数据将通过PHP从数据库中动态生成。

HTML结构示例:

发票列表
已选发票总金额：AED 0.00
                  发票号       日期       余额

PHP动态生成表格行示例:

PHP代码负责从数据库查询数据，并将其格式化为HTML表格行。关键在于为每个复选框添加必要的类名（checkbox）和名称（select[]），并为余额单元格添加类名（balance），以便JavaScript能够准确地选中和读取这些元素。

<?php// 假设 $conn 是已建立的数据库连接$query = 'SELECT id, cinv_no, cinv_date, cinv_bal FROM invoices_table'; // 示例查询$sql = mysqli_query($conn, $query);if ($sql) {    while ($result = mysqli_fetch_array($sql)) {        $id = htmlspecialchars($result['id']);        $inv_no = htmlspecialchars($result['cinv_no']);        $inv_date = date("d-m-Y", strtotime($result['cinv_date']));        $inv_bal = number_format($result['cinv_bal'], 2); // 格式化余额，保留两位小数        echo '';        // 注意：这里可以为复选框添加 data-value 属性，以便后续优化        echo '';        echo '' . $inv_no . '';        echo '' . $inv_date . '';        echo '' . $inv_bal . '';        echo '';    }} else {    echo '查询失败或无数据。';}?>

注意： 在PHP代码中，我们已经预先为复选框添加了data-value属性，其值为原始的未格式化余额。这为后续的优化方案做准备。同时，对输出数据进行htmlspecialchars处理以防止XSS攻击。

常见问题与初始JavaScript实现分析

在实现求和功能时，一个常见的错误是JavaScript逻辑未能正确关联复选框与其对应的余额单元格。

错误的JavaScript求和逻辑示例:

// 假设的初始（错误）的 updateSum 函数function updateSum_incorrect() {    var total = 0;    var select = $(".checkbox:checked"); // 选中所有被勾选的复选框    var balance = $(".balance");         // 选中所有余额单元格    // 问题所在：这里遍历的是选中的复选框，但却试图使用所有 .balance 元素的HTML内容    // 导致无论哪个复选框被选中，它总是从第一个 .balance 元素开始取值，而不是对应行的值    select.each(function() {        total += parseFloat(balance.html().replace(/,/g, ''));    });    $("#totalsum").html(total.toFixed(2));}

上述代码的问题在于，balance变量获取的是页面上所有具有class=”balance”的元素集合。在select.each()循环中，balance.html()总是返回集合中第一个元素的HTML内容。因此，无论哪个复选框被选中，它都会重复地将第一个余额值添加到总和中，导致计算结果不正确。

解决方案一：修正DOM元素选择逻辑

为了解决上述问题，我们需要确保在遍历每个被选中的复选框时，能够准确地找到其所在行的余额单元格。这可以通过DOM遍历来实现。

修正后的 updateSum 函数:

function updateSum() {  var total = 0;  // 遍历所有被勾选的复选框  $(".checkbox:checked").each(function() {    // 找到当前复选框的父元素，然后在其内部查找具有 .balance 类的元素    const balanceElement = $(this).parents('tr').find('.balance');    // 获取余额文本，移除逗号，转换为浮点数并累加    total += parseFloat(balanceElement.text().replace(/,/g, ''));  });  // 更新总和显示  $("#totalsum").text(total.toFixed(2));}// 全选/取消全选功能function toggleAll(sourceCheckbox) {  $('.checkbox').prop('checked', sourceCheckbox.checked);  updateSum(); // 全选/取消全选后也需要更新总和}// 事件绑定$(document).ready(function() {  // 为每个复选框绑定点击事件  $('.checkbox').on('click', updateSum);  // 为全选复选框绑定点击事件  $('#selectAll').on('click', function() {    toggleAll(this);  });  // 页面加载时初始化总和  updateSum();});

解释:

$(“.checkbox:checked”).each(function() { … });：这行代码遍历所有当前被勾选的复选框。this在回调函数中指向当前正在处理的复选框DOM元素。$(this).parents(‘tr’)：从当前复选框向上查找其最近的父级元素。.find(‘.balance’)：在找到的元素内部，向下查找具有class=”balance”的元素。这样就确保了我们获取的是与当前复选框同一行的余额。.text().replace(/,/g, ”)：获取元素的文本内容，并使用正则表达式replace(/,/g, ”)移除可能存在的千位分隔符（逗号），以确保parseFloat能够正确解析数字。parseFloat(…)：将处理后的字符串转换为浮点数。$(“#totalsum”).text(total.toFixed(2));：将计算出的总和格式化为两位小数，并更新到显示总和的元素中。

解决方案二：优化性能，使用Data属性

虽然上述方法是正确的，但每次计算都需要进行DOM遍历来查找对应的.balance元素。对于大型表格，这可能会带来一定的性能开销。一个更高效的解决方案是将余额值直接存储在复选框的HTML data属性中。

PHP生成的HTML（已包含 data-value 属性）：

如前文PHP代码所示，我们在生成复选框时，已经添加了data-value属性，其值是未格式化的原始余额。

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

优化后的JavaScript代码:

// 更新总和的函数const updateTotal = () => {  const total = $(".checkbox:checked") // 选中所有被勾选的复选框    .map(function() {      // 从每个被勾选的复选框的 data-value 属性中获取余额值      return parseFloat($(this).data('value'));    })    .toArray() // 将jQuery对象转换为原生数组    .reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 使用reduce方法求和  $('#totalsum').text(total.toFixed(2)); // 更新总和显示};// 全选/取消全选的函数const toggleAll = (checked) => {  $('.checkbox').prop('checked', checked);};// 事件绑定$(document).ready(function() {  // 为每个普通复选框绑定点击事件，每次点击都更新总和  $('.checkbox').on('click', updateTotal);  // 为全选复选框绑定点击事件  $('#selectAll').on('click', function() {    toggleAll($(this).is(':checked')); // 根据全选复选框的状态设置所有复选框的状态    updateTotal(); // 全选/取消全选后更新总和  });  // 页面加载时初始化总和  updateTotal();});

解释:

$(“.checkbox:checked”).map(function() { … })：map函数遍历所有被选中的复选框。对于每个复选框，$(this).data(‘value’)直接读取其data-value属性的值。由于这个值已经是纯数字字符串，可以直接parseFloat。.toArray()：map函数返回的是一个jQuery对象，toArray()将其转换为一个标准的JavaScript数组，以便可以使用reduce方法。.reduce((accumulator, currentValue) => accumulator + currentValue, 0)：这是一个高效的数组方法，用于将数组中的所有元素累加起来。0是初始值。toggleAll函数：接受一个布尔值参数checked，用于设置所有.checkbox的状态。事件绑定：使用on(‘click’, …)为复选框绑定事件，这比内联onclick更推荐，因为它将JavaScript行为与HTML结构分离。

注意事项与最佳实践

数据类型转换: 从DOM中获取的文本内容通常是字符串。在进行数学计算之前，务必使用parseFloat()或parseInt()将其转换为数字。清理数据: 如果数字中包含千位分隔符（如逗号），在转换为数字之前需要将其移除，例如使用replace(/,/g, ”)。精度问题: 浮点数计算可能会存在精度问题。在最终显示时，使用toFixed(2)等方法可以格式化结果并控制小数位数。事件委托: 对于动态生成的元素，如果表格行是后续通过AJAX等方式加载的，推荐使用事件委托来绑定事件，例如$(document).on(‘click’, ‘.checkbox’, updateTotal);。这样，即使新元素被添加到DOM中，它们也会自动拥有事件监听器。HTML语义化: 确保HTML结构清晰，使用正确的标签和属性。例如，表格的头部使用

，主体使用

。错误处理: 在实际应用中，应考虑对从data属性中获取的值进行验证，以防数据格式不正确。

总结

本教程展示了两种在动态生成的HTML表格中，根据复选框选择计算总和的方法。第一种方法通过DOM遍历精确查找对应行的余额，解决了初始逻辑错误。第二种方法则通过将数值存储在复选框的data属性中，显著提高了性能和代码简洁性，是更推荐的实现方式。在实际开发中，根据项目需求和性能考量，选择合适的方案，并结合最佳实践，能够构建出健壮高效的用户界面。

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

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

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

400.8K 文章

0 评论

1 粉丝

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

HTML拖放操作中自定义光标：实现“抓取”效果的专业指南

上一篇 2025年12月23日 08:15:45

从网页安全地启动Android应用：集成用户确认对话框的深度链接指南

下一篇 2025年12月23日 08:15:53

在HTML元素文本中添加换行符：递归遍历与DOM操作的挑战

本教程探讨如何在html元素的文本内容中添加换行符。文章首先分析了通过递归遍历dom树来识别和修改叶子节点文本的常见方法，并指出直接使用`innerhtml`或`textcontent`在处理同时包含文本和子元素的父节点时面临的挑战，即难以仅修改父节点的直接文本而不影响其子元素。引言：理解在HTM…

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

如何确保Microsoft Edge直接下载Office文件而非在线预览

本文旨在解决Microsoft Edge浏览器在点击下载Office文件链接时，默认启用在线预览而非直接下载的问题。通过深入分析HTTP响应头，我们发现通过在服务器端配置`Content-Disposition: attachment`和`Content-Type: application/octe…

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

深入理解CSS定位：确保元素在响应式布局中保持稳定

本教程深入探讨css定位属性，重点解决元素在屏幕缩放时位置不固定的常见问题。通过对比`position: relative`和`position: absolute`的工作原理，并结合具体代码示例，解释了为何使用百分比相对定位会导致元素漂移，并提供了利用绝对定位和固定像素值实现元素稳定定位的解决方案…

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

Mac Notion数据库模板管理HTML+CSS学习项目

用Notion管理Mac上的HTML+CSS学习项目，可通过自定义数据库整合进度、知识点、代码练习与资源链接。1. 创建主数据库，设标题、状态、类型、难度、耗时、完成日期、代码链接和笔记关联字段；2. 预设三类模板：基础语法学习（含标签表格、MDN链接、练习题）、小项目实战（目标描述、技术点、截图、…

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

利用CSS自定义属性与JavaScript实现画廊图片独立旋转

本教程详细阐述如何通过结合CSS自定义属性（CSS变量）和JavaScript事件处理，解决画廊中多张图片点击旋转时全部同步旋转的问题。核心在于为每张图片设置局部CSS变量，并利用HTML的`data-*`属性将按钮与特定图片关联，最终通过JavaScript精确控制单张图片的旋转状态，实现高效且独…

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

手机HTML网页编辑器入口 HTML编辑器手机在线免费

手机HTML网页编辑器入口位于https://www.tutorialspoint.com/codingground，该平台支持多语言在线编码、实时预览、无需安装、适配移动端，提供语法高亮、示例模板、多标签编辑、文件导出与分享功能，兼容安卓和iOS系统，适合初学者学习与小型项目开发。手机HTML网…

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

html文档转换器_html文档转换网页版工具

答案：可在Zamzar网页版工具中使用，访问https://www.zamzar.com/convert/html-to-pdf/，支持HTML转PDF、DOC等格式，无需安装软件，上传文件或输入链接即可在线转换，保留排版结构，跨平台兼容，无需注册，文件24小时内自动删除，保障隐私安全。 html文…

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

Mac M1芯片用Parallels运行Windows写HTML教程

首先在M1 Mac上通过Parallels安装Windows 11 for ARM，再部署VS Code与Edge浏览器，配置Live Server实现HTML预览，最后共享Mac文件夹实现跨系统开发协作。如果您希望在搭载M1芯片的Mac上使用Parallels运行Windows系统来编写HTML…

程序猿
2025年12月23日
0000
html代码怎么定义列表_html定义列表标签写法与实际应用方法

有序列表用定义，自动编号可自定义类型与起始值；无序列表用表示，列表项前显示圆点；定义列表用配合和展示术语与解释；三者可嵌套使用以构建多层级结构。如果您希望在网页中组织信息，使其更具条理性与可读性，使用HTML列表标签是一种常见且有效的方式。以下是关于如何定义和应用HTML列表的详细说明：一、有序…

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

如何解决在线HTML编辑器加载慢的详细步骤

在线HTML编辑器加载慢可通过优化网络请求、精简配置、提升前端性能和改善后端环境解决。启用CDN加速、合并压缩资源、延迟加载非核心功能可提升资源获取效率；按需引入模块、禁用冗余UI组件、选用轻量级方案能减少初始负担；采用懒加载、Intersection Observer和Web Worker可优化渲…

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

如何解决Eclipse HTML CSS联动的处理方法

确保HTML正确引用CSS，使用相对路径如../css/style.css；2. 在Eclipse中将.css和.html文件关联至对应编辑器并启用CSS验证；3. 修改后按F5刷新，执行Project Clean并清除浏览器缓存；4. 使用外部浏览器测试或安装Wild Web Developer插…

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

CSS怎么嵌入到HTML网页中_CSS嵌入到HTML网页中的完整教程

内联样式通过style属性直接设置元素样式，如；2. 内部样式表在中用标签定义页面级样式；3. 外部样式表将CSS保存为独立文件并通过引入，利于多页共享；4. @import可在CSS中导入其他样式文件，需置于规则前。如果您希望为HTML网页添加样式，使页面更具视觉吸引力，可以通过多种方式将CSS…

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

如何通过HTML5 Meta标签优化移动显示的详细教程

正确设置HTML5 meta标签是实现移动端良好显示的关键。首先必须添加视口标签，确保页面按设备宽度渲染且初始不缩放；可选maximum-scale和minimum-scale控制缩放范围，但不推荐禁用用户缩放。为提升iOS体验，可使用Apple专属标签：通过apple-mobile-web-app…

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

如何插音乐html_HTML音乐（audio标签）插入与播放控制方法

使用HTML5 audio标签可插入音乐并实现播放控制，支持多格式兼容、自定义属性设置及JavaScript操控，提升网页音频体验。在网页中插入音乐并实现基本播放控制，主要依靠HTML5的 audio 标签。它无需插件即可播放音频文件，支持多种格式，并提供简单的控制方式。 1. 基本audio标签…

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

html 如何使用macro_HTML宏（Macro）定义与模板引擎使用方法

使用模板引擎如Jinja2定义宏可实现HTML代码复用，通过在macros.html中定义input_field和button等宏，并在index.html中导入调用，提升开发效率与维护性，确保多页面组件一致性，避免重复代码。1. 建立清晰目录结构，如templates/components/分类存…

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

Mac系统自带文本编辑器如何启用HTML语法高亮？

通过启用“智能缩进”并设置等宽字体与深色主题，可在Mac文本编辑器中实现HTML基础语法高亮；保存为.html文件后还可通过浏览器开发者工具查看高亮结构。如果您在使用Mac系统自带的文本编辑器编写HTML代码，但发现没有语法高亮显示，可以通过启用“智能缩进”和选择合适的显示模式来实现基础的语法高亮…

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

html代码怎么版本控制_html代码版本管理工具与Git使用基础教程

使用Git进行HTML代码版本管理需先安装并配置Git，然后初始化本地仓库，提交代码至本地仓库，连接远程仓库并推送代码，最后通过拉取远程更新与解决冲突实现团队协作。如果您在编写HTML代码时需要追踪修改记录或与团队协作开发，就需要对代码进行版本控制。以下是使用Git进行HTML代码版本管理的基础操…

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

如何解决HTML视频嵌入问题的处理方法

正确使用video标签、提供多格式源、处理自动播放限制并优化加载性能可解决网页视频问题。需规范HTML代码，添加controls与preload属性，支持mp4、webm等格式以提升兼容性，移动端自动播放需静音或用户交互后触发，通过压缩文件、设置poster封面和使用流媒体服务优化体验。网页中嵌入…

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

html font如何使用_HTML字体（font标签/CSS font属性）使用与设置方法

现代网页开发推荐使用CSS的font属性控制字体样式。1. HTML font标签已废弃，不推荐使用。2. CSS通过font-family、font-size、color等属性实现灵活控制。3. font-family可设多个备选字体，按优先级生效。4. font-size支持px、em、rem、…

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

如何通过在线平台实现HTML代码自动补全的详细教程

主流平台如CodePen、JSFiddle和Replit均支持HTML自动补全，提升编码效率。1. CodePen默认开启补全并支持实时预览，确保JavaScript启用即可；2. JSFiddle依赖浏览器自动闭合，建议结合Emmet插件使用；3. Replit提供类IDE体验，内置Emmet支持…

程序猿
2025年12月23日
0000