删除列后如何减少总数？

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(){&nbsp; &nbsp; &nbsp; &nbsp;var total=0;&nbsp; &nbsp; &nbsp; &nbsp;$('.total_price').each(function(i,e){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var total_price=$(this).val()-0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; total +=total_price;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; $('.total').html("Rp. "+total);&nbsp;&nbsp;}然后你也有删除函数所以只需在行删除后调用 total 函数。$('.remove').live('click',function(){&nbsp; &nbsp; &nbsp; &nbsp; var last=$('tbody tr').length;&nbsp; &nbsp; &nbsp; &nbsp; if(last==1){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("You cannot delete the last row.");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(this).parent().parent().remove();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//Here your row has been deleted.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;total();&nbsp; &nbsp; &nbsp; &nbsp; }});

Answer 2

删除项目后尝试调用函数 total&nbsp; &nbsp; $('.remove').live('click',function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var last=$('tbody tr').length;&nbsp; &nbsp; if(last==1){&nbsp; &nbsp; &nbsp; &nbsp; alert("You cannot delete the last row.");&nbsp; &nbsp; }&nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(this).parent().parent().remove();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// Call your function total here&nbsp; &nbsp; }&nbsp; &nbsp; });