Question

我正在构建一个费用模板，我遇到了有关使用jQuery Calculations和点击功能来附加一组输入字段的问题。

我正在组合两个代码，一个用于计算输入字段中值的总和，另一个用于在用户单击时添加新的输入字段行（这些也将添加到总和中）。问题是，总和不会从新添加的行中添加总数。只添加默认的字段行。

感谢任何帮助（小提琴前：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 =＆＃34; sum＆＃34;并输出到另一个名为totalsum的输入。

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

Answer 1

我不熟悉jQuery Calculations，但看起来你正在做的事情可以使用普通的jQuery或javascript来实现。我做了一个快速谷歌搜索jquery总和，我发现这可能对你有帮助的其他stackoverflow帖子。 stackoverflow sum

您可以将名为“sum”的类属性添加到要汇总的所有字段，并使用标记为答案的jquery。计算完总数后，您可以将其分配给总金额输入字段。

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

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

附加更多输入字段后的jQuery计算

1 个答案: