前端實現營養搭配表單：jQuery 動態增減行、自動計算合計與差值

需求

頁面包含食物分類下拉、年齡段下拉、動態表格。選擇食物添加行，自動累加營養素，對比年齡段推薦值顯示差值。

技術棧

• jQuery 簡化 DOM 操作與事件綁定。
• 數據結構：嵌套對象存儲食物營養值、年齡段推薦值。

核心邏輯

1. 初始化一級分類 change 事件 → 填充二級分類。
2. 點擊「添加」→ 讀取選中食物數據 → 拼接 <tr> 追加到 tbody。
3. 每次增刪行後調用 updateSumDiff()：遍歷表格行累加各營養素 → 更新「合計」行 → 與年齡段值計算差值 → 更新「差距」行。
4. 年齡段切換 → 更新「人體正常值」行 → 觸發重新計算差值。

關鍵代碼片段

// 數據結構
const food = { 穀物: { 大米: [熱量,蛋白質,脂肪,碳水,膽固醇], ... }, 蔬菜: {...} };
const age = { '1-7歲': [...], '8-15歲': [...] };

// 更新合計與差值
function updateSumDiff() {
    const sum = [0,0,0,0,0];
    $('#tbFood tr').each(function() {
        $(this).find('td:gt(0):not(:last)').each(function(i) {
            sum[i] += parseFloat(this.innerText) || 0;
        });
    });
    $('#trSum td:gt(0):not(:last)').each(function(i) { this.innerText = sum[i]; });
    $('#trDiff td:gt(0):not(:last)').each(function(i) {
        const std = parseFloat($('#trAge td:gt(0):not(:last)').eq(i).text()) || 0;
        this.innerText = std - sum[i];
    });
}

優化建議

• 使用 data-* 屬性存儲原始數值，避免解析 innerText。
• 採用 Vue/React 等 MVVM 框架實現雙向綁定，邏輯更清晰。