jQuery实现表格tdwhite对应下方tdgray数值动态分组求和方案咨询

问题原因 #

你原有代码是全局统计所有.tdgray的数值总和，再统一赋值给全部.tdwhite，自然无法实现分组独立求和。

解决代码 #

直接替换你的原有JS代码即可：

// 逐个处理每个tdwhite单元格
$('.tdwhite').each(function() {
  let currentTotal = 0;
  // 从当前tdwhite所在的行开始，向后遍历所有同级行
  $(this).closest('tr').nextAll().each(function() {
    // 遇到下一个包含tdwhite的行就终止当前分组遍历
    if ($(this).find('.tdwhite').length) {
      return false;
    }
    // 累加当前行内tdgray的数值，非数字内容按0处理
    currentTotal += parseInt($(this).find('.tdgray').text()) || 0;
  });
  // 把求和结果赋值给当前tdwhite，需要保留"Und"字样可改成 $(this).text(`- Und ${currentTotal}`)
  $(this).text(currentTotal);
});

补充说明 #

• 你现有HTML中给多个td设置了相同的id="tdwhite"，id属于唯一标识不能重复，建议删除重复id避免其他功能报错。
• 该方案不需要修改现有DOM结构，300+个tdwhite的场景下也可以正常运行，每个tdwhite都会自动计算自身下方到下一个tdwhite之前所有tdgray的数值和。

内容的提问来源于stack exchange，提问作者Myers