如何基于现有jQuery表格行脚本实现每行单元格值动态相乘？

嘿，看起来你已经把列总和的计算逻辑跑通了，现在要给每行加上单元格值相乘的功能对吧？我来给你一步步梳理实现方案：

核心思路 #

我们需要新增一个计算行乘积的函数，然后修改输入框的触发事件，让每次输入时同时更新列总和和当前行的乘积结果。假设你已经在每行末尾添加了一个带.totalRow类的单元格，用来展示该行的乘积结果。

完整代码示例 #

$(document).ready(function(){
  // 绑定输入框的keyup事件
  $(".saisie").each(function() {
    $(this).keyup(function(){
      const $currentRow = $(this).closest('tr');
      const colIndex = $(this).parent().index();
      
      // 同时触发列总和计算和当前行乘积计算
      calculateTotal(colIndex);
      calculateRowProduct($currentRow);
    });
  });

  // 页面初始化时，先计算所有行的乘积和列总和
  $('table tr').each(function() {
    calculateRowProduct($(this));
  });
  // 初始化所有列的总和（这里假设你有N列，可根据实际列数循环）
  const totalCols = $('table tr:first td').length - 2; // 减去总和列和乘积列的数量，按需调整
  for(let i=0; i<totalCols; i++){
    calculateTotal(i);
  }
});

// 你原有的列总和计算函数（保留不变）
function calculateTotal(index) {
  var total = 0;
  $('table tr td').filter(function(){
    if($(this).index()==index) {
      total += parseFloat($(this).find('.saisie').val())||0;
    }
  });
  $('table tr td.totalCol:eq('+index+')').html(total.toFixed(2));
  calculateSum();
  calculateRowSum();
}

// 新增的行乘积计算函数
function calculateRowProduct($row) {
  let product = 1;
  // 遍历当前行所有带.saisie类的输入框
  $row.find('.saisie').each(function() {
    // 处理空值：如果输入为空，用1（避免乘积直接变为0，可根据业务需求改成0）
    const inputValue = parseFloat($(this).val()) || 1;
    product *= inputValue;
  });
  // 将结果写入当前行的.totalRow单元格，保留两位小数
  $row.find('.totalRow').html(product.toFixed(2));
}

// 你原有的其他函数（calculateSum、calculateRowSum）保留不变
function calculateSum() {
  // 你的原有逻辑
}
function calculateRowSum() {
  // 你的原有逻辑
}

关键细节说明 #

• 空值处理：在乘法计算中，我默认把空输入值当成1（这样不会影响其他数值的乘积），如果你的业务需要把空值当成0，直接把|| 1改成|| 0即可。
• 精度控制：用toFixed(2)保留两位小数，你可以根据需求调整小数位数，或者去掉这个方法显示原始数值。
• 初始化计算：页面加载完成后自动计算所有行的乘积和列总和，避免初始状态下没有数据的问题。

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