Как отобразить расчет 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");
  }


})