追加更多輸入字段后的jQuery計算

Question

我正在建立一個費用模板，關於使用jQuery計算和單擊功能來附加一組輸入字段時遇到問題。

我正在組合兩個代碼，一個用於計算輸入字段中值的總和，另一個用於在用戶單擊時添加新的輸入字段行（這些也將添加到總和中）。 問題是，總和沒有添加到新添加的行的總數中。 僅添加默認的字段行。

感謝您的任何幫助（Fiddle前： http : //jsfiddle.net/NicoleScotsburn/o8x02sjh/4/ ）

附有輸入代碼的表：

            //Increment Variables
            var items = $('#items');
            var i = $('#items td').size() + 1;
            var mileage = $('#mileage');
            var j = $('#mileage td').size() + 1;

            //Append Table Rows
            $('#addItem').on('click', function() {
                    $('<tr><td>&nbsp;<label for="date"><input type="text" id="date" size="10" name="date_' + i +'" value="" placeholder="mm/dd/yyyy" /></label></td>' +
                      '<td>&nbsp;<label for="desc"><input type="text" id="desc" size="30" name="desc_' + i +'" /></label></td>' +
                      '<td>&nbsp;$<label for="entmt"><input type="text" id="sum" size="10" name="entmt_' + i +'" placeholder="0.00" /></label></td>' +
                      '<td>&nbsp;$<label for="meals"><input type="text" id="sum" size="10" name="meals_' + i +'" placeholder="0.00" /></label></td>' +
                      '<td>&nbsp;$<label for="other"><input type="text" id="sum" size="10" name="other_' + i +'" placeholder="0.00" /></label></td>' +
                      '<td>&nbsp;$<label for="travel"><input type="text" id="sum" size="10" name="travel_' + i +'" placeholder="0.00" /></label></td>' +
                      '<td>&nbsp;$<label for="lodging"><input type="text" id="sum" size="10" name="lodging_' + i +'" placeholder="0.00" /></label></td>' +
                      '<td>&nbsp;$<label for="hst"><input type="text" id="sum" size="10" name="hst_' + i +'" placeholder="0.00" /></label></td>' +
                      '<td>&nbsp;<a href="#" id="remItem">Remove</a></td></tr>').appendTo(items);
                    i++;
                    return false;
            });

            $('#addMileage').on('click', function() {
                    $('<tr><td>&nbsp;<label for="mdate"><input type="text" id="mdate" size="10" name="mdate' + j +'" value="" placeholder="mm/dd/yyyy" /></label></td>' +
                      '<td>&nbsp;<label for="mlocation"><input type="text" id="mlocation" size="30" name="mlocation' + j +'" value="" placeholder="" /></label></td>' +
                      '<td>&nbsp;<label for="km"><input type="text" id="km" size="10" name="km' + j +'" value="" placeholder="" />KM</label></td>' +
                      '<td>&nbsp;<a href="#" id="remMileage">Remove</a></td></tr>').appendTo(mileage);
                    j++;
                    return false;
            });


            //Remove Buttons
            $('body').on('click', '#remItem', function() { 
                    if( i > 2 ) {
                            $(this).parents('tr').remove();
                            i--;
                    }
                    return false;
            });
            $('body').on('click', '#remMileage', function() { 
                if( j > 2 ) {
                        $(this).parents('tr').remove();
                        j--;
                }
                return false;
             });

計算函數：（這在假設輸入的id為id =“ sum”的情況下起作用，並輸出到另一個稱為totalsum的輸入中。

        $("input[id^=sum]").sum("keyup", "#totalSum");

Answer 1

我對jQuery Calculations並不熟悉，但是看起來您可以使用簡單的jQuery或javascript來實現。 我做了一個快速的谷歌搜索的jQuery總和，我發現這可能會幫助您的其他stackoverflow文章。 堆棧溢出總和

您可以在要匯總的所有字段中添加一個名為“ sum”的類屬性，並使用標記為答案的jquery。 完成總計計算后，您可以將其分配到總計輸入字段。

$('.sum').blur(function () {
    var sum = 0;
    $('.sum').each(function() {
       sum += Number($(this).val());
    });

    $("#totalsum").val(sum);
});​​​​​​​​​