jquery - JQuery根据选择在表中添加新行

Question

当用户从下拉列表中选择一个值时，会动态添加一行，这在我的 laravel 项目中工作得很好。

然后向该行添加一个新产品，该行也向表中添加一行，但以前的产品记录也被该产品值替换。

    <div class="card-body">
        <div class="row">
            <div class="col-12 col-md-12 col-sm-12 form-group table-responsive m-b-30">
                <table class="table table-bordered" id="trainingsTable">
                <thead>
                    <tr>
                        <th>Ekle</th>
                        <th>Eğitim</th>
                        <th>Satış</th>
                        <th>Liste</th>
                        <th>İndirimli</th>
                        <th>Sınav</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><button type="button" name="add" id="add" class="btn btn-success"><i class="fa fa-plus-circle"></i></button></td>
                        <td>
                            <select class="form-control selectTraining" name="training_id[]" id="training_id[]">
                                <option>Seçiniz</option>
                                @foreach($trainings as $training)
                                <option data-price="{{ $training->price }}" data-listprice="{{ $training->list_price }}" data-examprice="{{ $training->exam_price }}" value="{{ $training->id }}">{{ $training->name }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td>{!! Form::text('sale_amount[]', old('sale_amount'), ['id' => 'sale_amount[]', 'class' => 'form-control sale_amount']) !!}</td>
                        <td><input type="text" name="list_price" id="list_price" value="" class="form-control list_price" disabled /></td>
                        <td><input type="text" name="price" id="price" value="" class="form-control price" disabled /></td>
                        <td><input type="text" name="exam_price" id="exam_price" value="" class="form-control exam_price" disabled /></td>
                    </tr>
                </tbody>
                </table> 
            </div>
        </div>
    </div>

// Script Start
    $('.selectTraining').on('change', function() {
        $('.list_price').val($(this).find(':selected').data('listprice'));
        $('.price').val($(this).find(':selected').data('price'));
        $('.exam_price').val($(this).find(':selected').data('examprice'));
    });
    var i = 0;
    $("#add").click(function(){
        ++i;
        $("#trainingsTable").append('<tr>' +
            '<td><button type="button" class="btn btn-danger remove-tr"><i class="fa fa-minus-circle"></i></button></td>' +
            '<td>' +
                '<select class="form-control selectTraining" name="training_id[]" id="training_id[]">' +
                    '<option>Seçiniz</option>' +
                    '@foreach($trainings as $training)' +
                    '<option data-price="{{ $training->price }}" data-listprice="{{ $training->list_price }}" data-examprice="{{ $training->exam_price }}" value="{{ $training->id }}" >{{ $training->name }}</option>' +
                    '@endforeach' +
                '</select>' +
            '</td>' +
            '<td>{!! Form::text('sale_amount[]', old('sale_amount'), ['id' => 'sale_amount[]', 'class' => 'form-control sale_amount']) !!}</td>' +
            '<td><input type="text" name="list_price" id="list_price" value="" class="form-control list_price" disabled /></td>' +
            '<td><input type="text" name="price" id="price" value="" class="form-control price" disabled /></td>' +
            '<td><input type="text" name="exam_price" id="exam_price" value="" class="form-control exam_price" disabled /></td></tr>');
            $('.selectTraining').on('change', function() {
                $('.list_price').val($(this).find(':selected').data('listprice'));
                $('.price').val($(this).find(':selected').data('price'));
                $('.exam_price').val($(this).find(':selected').data('examprice'));
            });
    });
    $(document).on('click', '.remove-tr', function(){  
            $(this).parents('tr').remove();
    });
// Script End

截屏

可以在已售出的行中选择产品，并自动在相关字段中填写报价、折扣价和考试费。But when two or more lines are selected, all fields are filled with the latest contact information, crushing other selections.

感谢您的帮助...

标签： jquerylaravel

Answer 1

当您的选择框更改时，您将使用 class 定位所有输入。list_price , price..etc相反，您可以使用$(this).closest('tr')它将获得选择框已更改的最接近的 tr，然后用于.find()查找输入并在那里添加所需的值。

演示代码：

$(document).on('change', '.selectTraining', function() {
  var selector = $(this).closest('tr') //get closest tr
  //find inputs inside required tr and then find input
  selector.find('.list_price').val($(this).find(':selected').data('listprice'));
  selector.find('.price').val($(this).find(':selected').data('price'));
  selector.find('.exam_price').val($(this).find(':selected').data('examprice'));
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-body">
  <div class="row">
    <div class="col-12 col-md-12 col-sm-12 form-group table-responsive m-b-30">
      <table class="table table-bordered" id="trainingsTable">
        <thead>
          <tr>
            <th>Ekle</th>
            <th>Eğitim</th>
            <th>Satış</th>
            <th>Liste</th>
            <th>İndirimli</th>
            <th>Sınav</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><button type="button" name="add" id="add" class="btn btn-success"><i class="fa fa-plus-circle"></i></button></td>
            <td>
              <select class="form-control selectTraining" name="training_id[]" id="training_id[]">
                <option>Seçiniz</option>

                <option data-price="12" data-listprice="23" data-examprice="32" value="1">A</option>
                <option data-price="13" data-listprice="33" data-examprice="33" value="2">B</option>
              </select>
            </td>
            <td><input type="text" class="form-control sale_amount" name="sale_amount[]">
              <td><input type="text" name="list_price" value="" class="form-control list_price" disabled /></td>
              <td><input type="text" name="price" value="" class="form-control price" disabled /></td>
              <td><input type="text" name="exam_price" value="" class="form-control exam_price" disabled /></td>
          </tr>
          <tr>
            <td><button type="button" class="btn btn-danger remove-tr"><i class="fa fa-minus-circle"></i></button></td>
            <td>
              <select class="form-control selectTraining" name="training_id[]" id="training_id[]">
                <option>Seçiniz</option>

                <option data-price="12" data-listprice="23" data-examprice="32" value="1">A</option>
                <option data-price="13" data-listprice="33" data-examprice="33" value="2">B</option>
              </select>
            </td>
            <td><input type="text" class="form-control sale_amount" name="sale_amount[]">
              <td><input type="text" name="list_price" value="" class="form-control list_price" disabled /></td>
              <td><input type="text" name="price" value="" class="form-control price" disabled /></td>
              <td><input type="text" name="exam_price" value="" class="form-control exam_price" disabled /></td>
          </tr>
          <tr>
            <td><button type="button" class="btn btn-danger remove-tr"><i class="fa fa-minus-circle"></i></button></td>
            <td>
              <select class="form-control selectTraining" name="training_id[]" id="training_id[]">
                <option>Seçiniz</option>

                <option data-price="12" data-listprice="23" data-examprice="32" value="1">A</option>
                <option data-price="13" data-listprice="33" data-examprice="33" value="2">B</option>
              </select>
            </td>
            <td><input type="text" class="form-control sale_amount" name="sale_amount[]">
              <td><input type="text" name="list_price" value="" class="form-control list_price" disabled /></td>
              <td><input type="text" name="price" value="" class="form-control price" disabled /></td>
              <td><input type="text" name="exam_price" value="" class="form-control exam_price" disabled /></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>