javascript - 单击添加行并从列表中选择1个选项时，我想获得总和值吗？

Question

使用下面的函数，我想对每一行的值求和并在“总计”输入字段中显示它。问题是用户首先选择然后显示值，而当我单击第二行时，输入字段显示第二个下拉值。我想要所有行值的总和。

<table class="table table-hover small-text" id="tb">
  <tr class="tr-header">
    <th>Vehicle Number</th>
    <th>Rate</th>
    <th>Driver Name
      <a data-toggle="modal" data-target="#contact-modal-2">
        <span class="glyphicon glyphicon-plus-sign"></span>
      </a>
    </th>
    <th><a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Person"><span class="glyphicon glyphicon-plus"></span></a></th>
    <tr>
      <td>
        <select name="vehicle_id[]" class="form-control">
          <option value="" selected>Select Vehicle</option>
          @foreach($car_no as $car_no)
           <option value="{{$car_no->id}}">{{$car_no->car_number}}</option>
          @endforeach
        </select>
      </td>
      <td>
        <div class="inputContainer">
      </td>
      <td>
        <select name="driver_id[]" class="form-control">
          <option value="" selected>Select Driver</option>
          @foreach($driver_detail as $driver_detail)
            <option value="{{$driver_detail->id}}">{{$driver_detail->name}}</option>
          @endforeach
        </select>
      </td>

      <td>
        <a href='javascript:void(0);' class='remove'>
          <span class='glyphicon glyphicon-remove'></span>
        </a>
      </td>
    </tr>
</table>

  这是表外。

<div class="form-group">
            <label for="password">Total</label>
            <input type="text" class="form-control total" id="total" name="total" readonly>
          </div>

$("select[name='vehicle_id[]']").change(function() {
  var $row = $(this).closest('tr');
  var inputcontainer = $row.find(".inputContainer");
  var vehicle = $(this).val();
  var sum = 0;
  console.log(vehicle);
  var token = $("input[name='_token']").val();

  $.ajax({
    url: "<?php echo url('admin/rate') ?>",
    method: 'POST',
    data: {
      vehicle: vehicle,
      _token: token
    },
    success: function(data) {
      //Modify existing container
      inputcontainer.find('input').remove();
      $.each(data, function(i, item) {
        const $input = $('<input />')
          .addClass('form-control rate')
          .attr('name', 'rate[]')
          .attr('id', 'rate' + i)
          .attr('type', 'text')
          .attr('readonly', 'readonly')
          .val(item.rate)

        // here we append it into container
        inputcontainer.append($input);
      });
      $row.find('td:not(.rate) input:text').each(function() {
        sum += parseFloat(this.value); // or parseInt(this.value,10) if appropriate
      });
      console.log(sum);
      $("#total").val(sum);
    }
  });
});

Answer 1

试试这个，用MY代码替换JS。 JS确实有问题
  您调用每个函数的值只会更新。

  <script type="text/javascript">
      $("select[name='vehicle_id[]']").change(function(){
        var $row = $(this).closest('tr');
        var inputcontainer = $row.find(".inputContainer"); 
          var vehicle = $(this).val();
          var sum = 0;
          console.log(vehicle);
          var token = $("input[name='_token']").val();
          $.ajax({
              url: "<?php echo url('admin/rate') ?>",
              method: 'POST',
              data: {vehicle:vehicle, _token:token},
              success: function(data) {
            //Modify existing container
                inputcontainer.find('input').remove(); 
                $.each(data, function(i, item) {

                    const $input = $('<input />')
                       .addClass('form-control rate')
                       .attr('name','rate[]')
                       .attr('id', 'rate'+i)
                       .attr('type', 'text')
                       .attr('readonly', 'readonly')
                       .val(item.rate)

                     // here we append it into container
                     inputcontainer.append($input);


                     calculateSum();
                });

              }
          });

      });

    function calculateSum() {

    var sum = 0;
    $(".rate").each(function () {

        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }

    });
    $("#total").val(sum.toFixed(0));
    }