jQuery 表格數據統計：合計與差距計算並實現負值紅色顯示

業務場景

頁面包含多行食品營養數據表格，需實時計算每列的「合計」與「差距」（輸入值 - 合計），並將差距為負值的單元格標紅顯示。

原始代碼問題分析

// 原有問題代碼片段
tdDiffs.find('tr').each(function () {
    $('td:gt(0)', this).not(':last').each(function (index) {
        if(tdDiffs.val() < 0 ){  // 錯誤：tdDiffs 是 jQuery 集合，無 val() 方法
            $(this).css("color","red");
        } else {
            $(this).css("color","black");
        }
    });
});

核心錯誤：tdDiffs.val() 嘗試獲取整個集合的值，實際應在遍歷中針對每個單元格判斷其文本內容。

優化後的統一計算邏輯

function updateSumDiff() {
    var sum = []; // 每列營養小計

    // 1. 遍歷 tbFood 計算每列小計
    tbFood.find('tr').each(function () {
        $('td:gt(0)', this).not(':last').each(function (index) {
            var val = parseInt(this.innerHTML) || 0;
            sum[index] = (sum[index] || 0) + val;
        });
    });

    // 2. 一次性更新「合計」與「差距」行，並設置顏色
    tdAges.each(function (index) {
        var ageVal = parseInt(this.innerHTML) || 0;
        var total = ageVal + (sum[index] || 0);
        var diff = ageVal - (sum[index] || 0);

        // 更新合計列
        tdSums.eq(index).html(total.toFixed(2));

        // 更新差距列並根據正負設置顏色
        tdDiffs.eq(index)
            .html(diff.toFixed(2))
            .css('color', diff < 0 ? 'red' : 'black');
    });
}

關鍵改進點

1. 合併遍歷：原代碼先更新合計/差距，再單獨遍歷設置顏色，現合併為單次循環，性能提升。
2. 正確取值判斷：使用 parseInt(this.innerHTML) || 0 獲取單元格數值，避免 val() 誤用。
3. 鏈式調用：.html(...).css(...) 簡潔高效。
4. 保留兩位小數：使用 .toFixed(2) 統一格式。

完整功能代碼結構

// 初始化一級分類
for (var attr in food) {
    sFood1.append('<option value="' + attr + '">' + attr + '</option>');
}

// 一級分類變更聯動二級分類
sFood1.change(function () {
    var arr = food[this.value];
    sFood2.html('');
    for (var attr in arr) {
        sFood2.append('<option value="' + attr + '">' + attr + '</option>');
    }
}).trigger('change');

// 年齡/性別變更更新年齡行並觸發統計
sAge.add('#sex').change(function () {
    var arr = sAge.val() == '請選擇' ? age['請選擇'] : age[sAge.val()][sSex.val()];
    tdAges.each(function (index) {
        this.innerHTML = arr[index];
    });
    updateSumDiff();
});

// 新增食品行
function addFood() {
    var arr = food[sFood1.val()][sFood2.val()];
    var s = '<tr><td>' + sFood2.val() + '</td>';
    for (var i = 0; i < arr.length; i++) s += '<td>' + arr[i] + '</td>';
    s += '<td><input type="button" value="刪除" onclick="removeFood(this)"/></td></tr>';
    tbFood.append(s);
    updateSumDiff();
}

// 刪除食品行
function removeFood(o) {
    $(o).closest('tr').remove();
    updateSumDiff();
}

總結

通過合併計算邏輯、修正取值方式、善用 jQuery 鏈式調用，實現了高效、可維護的表格統計功能，負值自動標紅提升了數據可讀性。