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

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

动态表格行求和的挑战

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

HTML结构与PHP数据生成

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

HTML结构示例

选定发票总金额：AED 
0.00

  

    

      

      
发票编号
      
日期
      
余额
    
  
  

    
  

PHP动态生成表格行

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

';
    // 将 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);
    });
  });

  代码解析：

  

  Matlab语言的特点 中文WORD版

  本文档主要讲述的是Matlab语言的特点；Matlab具有用法简单、灵活、程式结构性强、延展性好等优点，已经逐渐成为科技计算、视图交互系统和程序中的首选语言工具。特别是它在线性代数、数理统计、自动控制、数字信号处理、动态系统仿真等方面表现突出，已经成为科研工作人员和工程技术人员进行科学研究和生产实践的有利武器。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

  下载
  • $(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实现方案。

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

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

  最佳实践建议：

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

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