使用jQuery删除更新总数据的表行

Question

我有一个表，可以在其中添加多个数字并创建add more按钮，还可以在表上添加新行并使用jQuery计算所有总数。 现在，当我删除新行时，总值不会更新，但是当我单击一些input fields然后更新时。 现在我的问题是

删除行后，如何使总值自动更新。

下面是我的代码：

 function addMore() { var new_raw = $('<tr><td><a href="javascript:void(0);" style="padding:0px;" class="remove">Remove</a><td><input type="number" class="addData"></td></tr>'); new_raw.insertBefore('#my_new_raw'); $("#myTable").on('click', '.remove', function() { $(this).parent().parent().remove(); }); } $(document).on('blur keyup', '.addData', function(e) { var sum = 0; $('.addData').each(function(i) { if (!isNaN(this.value) && this.value.length != 0) { if ($(this).hasClass('addData')) { sum += parseFloat(this.value); } } }); $('#my_total').val(sum.toFixed(2)); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table" id="myTable"> <tbody> <tr> <td>Value 1</td> <td><input type="number" class="addData"></td> </tr> <tr> <td>Value 2</td> <td><input type="number" class="addData"></td> </tr> <tr id="my_new_raw"> <td><a href="javascript:void(0);" onclick="addMore()">Add More</a></td> <td></td> </tr> <tr> <td>Total</td> <td><input type="number" readonly id="my_total"></td> </tr> </tbody> </table> 

我知道我没有调用函数来更新总数，因为我不知道怎么做。 在这里帮我。 谢谢前进

Answer 1

TL; DR只需再次calculate 。

您的计算方式已经很好，只需将其包装一个函数，然后就可以随时调用它。

 function addMore() { var new_raw = $('<tr><td><a href="javascript:void(0);" style="padding:0px;" class="remove">Remove</a><td><input type="number" class="addData"></td></tr>'); new_raw.insertBefore('#my_new_raw'); $("#myTable").on('click', '.remove', function() { $(this).parent().parent().remove(); calculate(); }); } function calculate() { var sum = 0; $('.addData').each(function(i) { if (!isNaN(this.value) && this.value.length != 0) { if ($(this).hasClass('addData')) { sum += parseFloat(this.value); } } }); $('#my_total').val(sum.toFixed(2)); } $(document).on('blur keyup', '.addData', function(e) { calculate(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table" id="myTable"> <tbody> <tr> <td>Value 1</td> <td><input type="number" class="addData"></td> </tr> <tr> <td>Value 2</td> <td><input type="number" class="addData"></td> </tr> <tr id="my_new_raw"> <td><a href="javascript:void(0);" onclick="addMore()">Add More</a></td> <td></td> </tr> <tr> <td>Total</td> <td><input type="number" readonly id="my_total"></td> </tr> </tbody> </table> 

Answer 2

如果使用blur和keyup ，则使用箭头更改数字值时不会改变总数。 我更喜欢input事件。 您可以在点击删除时触发input事件：

$('.addData').trigger('input');

工作代码示例：

 function addMore() { var new_raw = $('<tr><td><a href="javascript:void(0);" style="padding:0px;" class="remove">Remove</a><td><input type="number" class="addData"></td></tr>'); new_raw.insertBefore('#my_new_raw'); $("#myTable").on('click', '.remove', function() { $(this).parent().parent().remove(); $('.addData').trigger('input'); }); } $(document).on('input', '.addData', function(e) { var sum = 0; $('.addData').each(function(i) { if (!isNaN(this.value) && this.value.length != 0) { if ($(this).hasClass('addData')) { sum += parseFloat(this.value); } } }); $('#my_total').val(sum.toFixed(2)); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table" id="myTable"> <tbody> <tr> <td>Value 1</td> <td><input type="number" class="addData"></td> </tr> <tr> <td>Value 2</td> <td><input type="number" class="addData"></td> </tr> <tr id="my_new_raw"> <td><a href="javascript:void(0);" onclick="addMore()">Add More</a></td> <td></td> </tr> <tr> <td>Total</td> <td><input type="number" readonly id="my_total"></td> </tr> </tbody> </table> 

或：通过使用功能

 function addMore() { var new_raw = $('<tr><td><a href="javascript:void(0);" style="padding:0px;" class="remove">Remove</a><td><input type="number" class="addData"></td></tr>'); new_raw.insertBefore('#my_new_raw'); $("#myTable").on('click', '.remove', function() { $(this).parent().parent().remove(); updateTotal(); }); } $(document).on('input', '.addData', function(e) { updateTotal(); }); function updateTotal(){ var sum = 0; $('.addData').each(function(i) { if (!isNaN(this.value) && this.value.length != 0) { if ($(this).hasClass('addData')) { sum += parseFloat(this.value); } } }); $('#my_total').val(sum.toFixed(2)); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table" id="myTable"> <tbody> <tr> <td>Value 1</td> <td><input type="number" class="addData"></td> </tr> <tr> <td>Value 2</td> <td><input type="number" class="addData"></td> </tr> <tr id="my_new_raw"> <td><a href="javascript:void(0);" onclick="addMore()">Add More</a></td> <td></td> </tr> <tr> <td>Total</td> <td><input type="number" readonly id="my_total"></td> </tr> </tbody> </table> 

Answer 3

简单地将计算代码包装为函数，并使用closest()代替parent().parent()

 function addMore() { var new_raw = $('<tr><td><a href="javascript:void(0);" style="padding:0px;" class="remove">Remove</a><td><input type="number" class="addData"></td></tr>'); new_raw.insertBefore('#my_new_raw'); } function calc() { var sum = 0; $('.addData').each(function(i) { if (!isNaN(this.value) && this.value.length != 0) { if ($(this).hasClass('addData')) { sum += parseFloat(this.value); } } }); $('#my_total').val(sum.toFixed(2)); } $(document).on('blur keyup', '.addData', function(e) { calc(); }).on('click', '#myTable .remove', function() { $(this).closest('tr').remove(); calc(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table" id="myTable"> <tbody> <tr> <td>Value 1</td> <td><input type="number" class="addData"></td> </tr> <tr> <td>Value 2</td> <td><input type="number" class="addData"></td> </tr> <tr id="my_new_raw"> <td><a href="javascript:void(0);" onclick="addMore()">Add More</a></td> <td></td> </tr> <tr> <td>Total</td> <td><input type="number" readonly id="my_total"></td> </tr> </tbody> </table> 

Answer 4

<script>
    function addMore() {
        var new_raw = $('<tr><td><a href="javascript:void(0);" style="padding:0px;" class="remove">Remove</a><td><input type="number" class="addData"></td></tr>');
        new_raw.insertBefore('#my_new_raw');
        $("#myTable").on('click', '.remove', function () {
            $(this).parent().parent().remove();
            var sum = 0;
            $('.addData').each(function (i) {
                if (!isNaN(this.value) && this.value.length != 0) {
                    if ($(this).hasClass('addData')) {
                        sum += parseFloat(this.value);
                    }
                }
            });
            $('#my_total').val(sum.toFixed(2));
        });

    }


    $(document).on('blur keyup', '.addData', function (e) {

        var sum = 0;
        $('.addData').each(function (i) {
            if (!isNaN(this.value) && this.value.length != 0) {
                if ($(this).hasClass('addData')) {
                    sum += parseFloat(this.value);
                }
            }
        });
        $('#my_total').val(sum.toFixed(2));
    })
</script>