jQuery 實現動態試算表：面積 × (數量+價格+重量) = 小計，多行加總

HTML 結構

總和：

  
  
    
面積：

    
*(數量：

    
+價格：

    
+重量：
)
  
  
小計：

  
  
    
面積：

    
*(數量：

    
+價格：

    
+重量：
)
  
  
小計：

jQuery 邏輯

$(function() {
    $('#panel tr:has(.qty)').on('input change', '.qty, .price, .weight', function() {
        var total = 0;
        $('#panel tr:has(.qty)').each(function() {
            var $row = $(this);
            var a = parseFloat($row.find('.area').val()) || 0;
            var n = parseFloat($row.find('.qty').val()) || 0;
            var p = parseFloat($row.find('.price').val()) || 0;
            var w = parseFloat($row.find('.weight').val()) || 0;
            var sum = a * (n + p + w);
            $row.next().find('.subtotal').val(sum.toFixed(2));
            total += sum;
        });
        $('#total').val(total.toFixed(2));
    });
});

關鍵點

• 使用 class 而非 id 區分多行，避免 ID 重複無效。
• :has(.qty) 選取輸入行，.next() 取緊鄰的小計行。
• parseFloat(val) || 0 防空值/非數字導致 NaN。
• toFixed(2) 保留兩位小數，符合金額顯示習慣。
• 事件綁定 input change 覆蓋鍵盤、滑鼠、自動填入等觸發來源。

原答案核心

提供完整 jQuery 程式碼，含 HTML 結構調整（移除重複 id、改用 class），實現即時計算小計與總和。