如何在另一列上显示html表格的计算

Question

我有3列，一列total_column_price用来显示amount和device_price的计算结果。如何实现？

表格

{{ Form::open(['action' => 'TransactionsINController@store', 'method' => 'POST']) }}

<table class="table table-hover table-bordered">
    <thead align="center">
        <tr>
            <th>Amount</th>
            <th>Device Price</th>
            <th><a href="#" class="btn btn-primary btn-sm addRow">
                    <i class="fa fa-plus"></i>
                </a>
            </th>
            <th>Column Total Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="form-group">
                    {{ Form::number('amount[]', 'value', ['name' => 'amount[]']) }}
                </div>
            </td>
            <td>
                <div class="form-group">
                    {{ Form::number('device_price[]', 'value', ['name' => 'device_price[]']) }}
                </div>
            </td>
            <td align="center">
                <a href="#" class="btn btn-danger btn-sm remove">
                    <i class="fa fa-times"></i>
                </a>
            </td>
            <td>
                {{ Form::text('total_column_price', '') }}
            </td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>Total: </td>
            <td style="border: none"><b class="total_price"></b></td>
            <td style="border: none"></td>
        </tr>
    </tfoot>
</table>

{{ Form::button('<i class="far fa-save"></i> Submit', ['type' => 'submit', 'class' => 'btn btn-info'] )  }}
{{ Form::close() }}

这是我尝试使用的计算方法。目的是当我在amount 和device_price 列中输入时，结果将自动出现在total_column_price 中。

计算脚本

<script type="text/javascript">
        $('tbody').delegate('.amount,.device_price','keyup',function(){
            var tr=$(this).parent().parent();
            var amount=tr.find('.amount').val();
            var device_price=tr.find('.device_price').val();
            var total_column_price=(amount*device_price);
            tr.find(.total_column_price).val(total_column_price);
            total_price();
        });
        function total_price(){
            var total_price=0;
            $('.total_column_price').each(function(i,e){
                var total_column_price=$(this).val()-0;
            total_price +=total_column_price;
        });
            $('.total_price').html(total_price+",00");
        }
</script>

Answer 1

您的代码中的一切似乎都很好，问题是您使用 JQuery 查找功能的方式，您需要在输入选择器时添加引号。

 tr.find('.total_column_price').val(total_column_price);

使用新的事件句柄 .on() .on() 语法是 1.7 版使用的新语法，旨在替代 .bind()、.delegate() 和 .live()。

您的 javascript 中的另一个问题与从输入框中的 keyup 获取父级有关。 应该是这样的

var tr = $(this).parent().parent().parent();

试试下面的代码：

 $(function() {

  $(document).on('keyup', 'input[name="amount[]"],input[name="device_price[]"]', function() {
    var tr = $(this).parent().parent().parent();
    var amount = tr.find('input[name="amount[]"]').val();
    var device_price = tr.find('input[name="device_price[]"]').val();
    var total_column_price = (amount * device_price);
    total_price();
  });

  function total_price() {
    var total_price = 0;
    $('input[name="total_column_price[]"]').each(function(i, e) {
      var total_column_price = $(this).val() - 0;
      total_price += total_column_price;
    });
    $('.total_price').html(total_price + ",00");
  }


})