删除列后如何减少总数？

Question

现在的情况我有动态表，我可以添加/删除列并在显示每行总累积的价格列下进行基本计算。但是如果我删除第二/第三行，总数不会改变。预期情况当我删除行时，总数会相应地自动更改HTML<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"    integrity="sha256-/05Jde9AMAT4/o5ZAI23rUf1SxDYTHLrkOco0eyRV84=" crossorigin="anonymous"></script><table class="table table-striped table-bordered">    <thead align="center" class="table table-primary">        <tr>            <th width="10%">amount</th>            <th width="10%">Price</th>            <th><a href="#" class="addRow btn btn-primary btn-sm"><i class="fa fa-plus"></i></a></th>        </tr>    </thead>    <tbody>        <tr>            <td>                <input type="number" name="amount[]" class="amount" min="1" max="1000000" required="">            </td>            <td>                <input type="number" name="Price[]" class="Price" min="1" max="1000000000000" required="">            </td>            <td align="center">                <a href="#" class="btn btn-danger remove btn-sm">                    <i class="fa fa-times"></i>                </a>            </td>            <td style="display:none;">                <input type="number" name="total_price[]" class="total_price">            </td>        </tr>    </tbody>    <tfoot>        <tr>            <td>Total Price: </td>            <td><b class="total"></b></td>            <td style="border: none"></td>        </tr>    </tfoot></table>Javascript<script type="text/javascript">    $('tbody').delegate('.amount,.Price','keyup',function(){            var tr=$(this).parent().parent();            var amount=tr.find('.amount').val();            var Price=tr.find('.Price').val();            var total_price=(amount*Price);            tr.find('.total_price').val(total_price);            total();        });

Answer 1

好的，您的问题已经有了答案..

首先，您有总计算方法。

function total(){

       var total=0;

       $('.total_price').each(function(i,e){

            var total_price=$(this).val()-0;

            total +=total_price;

        });

        $('.total').html("Rp. "+total);  

}

然后你也有删除函数

所以只需在行删除后调用 total 函数。

$('.remove').live('click',function(){

        var last=$('tbody tr').length;

        if(last==1){

            alert("You cannot delete the last row.");

        }

        else{

             $(this).parent().parent().remove();

             //Here your row has been deleted.

             total();

        }

});

Answer 2

删除项目后尝试调用函数 total

    $('.remove').live('click',function(){

         var last=$('tbody tr').length;

    if(last==1){

        alert("You cannot delete the last row.");

    }

    else{

         $(this).parent().parent().remove();

         // Call your function total here

    }

    });