使用jQuery实现HTML表格除首列外其余各列分别求和求助

问题错误点 #

• 原有写法的$('td').not(":first")仅排除了所有td中的第一个元素，没有实现排除每行首列的效果
• td元素没有val()方法，该方法仅适用于表单输入类元素，取td内容需要用text()方法
• 没有按列索引区分不同列的数值，所有数值都累加至同一个变量，无法实现分列求和

正确实现代码 #

在你执行完$("#details").empty().append(data);填充表格内容后，追加如下代码即可：

// 初始化总和数组，顺序对应你填充的列：Income、Expense、Margin、Margin Profit、Time
const colTotals = [0, 0, 0, 0, 0];

// 遍历tbody所有行
$('#details tr').each(function () {
  // 跳过每行第一列（Popname列），遍历其余列
  $(this).find('td').slice(1).each(function (index) {
    // 取内容转数字，异常值按0处理
    const num = parseFloat($(this).text().trim()) || 0;
    colTotals[index] += num;
  });
});

// 将求和结果写入页脚对应位置，保留两位小数
$('#totalofIncome').text(colTotals[0].toFixed(2));
$('#totalofExpense').text(colTotals[1].toFixed(2));
$('#totalofMargin').text(colTotals[2].toFixed(2));
$('#totalofMarginProfit').text(colTotals[3].toFixed(2));
$('#totalofTime').text(colTotals[4].toFixed(2));

补充说明 #

你当前填充tbody的列顺序和thead表头的列顺序不匹配：表头第二列为Expense，但你填充的第二列为Income，若需要表头表体顺序一致，调整填充时的td字段顺序即可。

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