Блог

я новичок в jquery, И у меня есть проблема с умножением с помощью jquery, мой образец формы :

Первая строка формы рассчитана правильно, но умножение не выполняется со второй строки.

Микод-это :

 $(document).ready(function () {
      var rowIdx = 0;
      $('#addBtn').on('click', function () {
        $('#tbody').append(`<tr id="R${  rowIdx}">
            <td>${rowIdx}</td>
            <td>
                <select id="group" name="group" class="form-control form-select">
                    @foreach($groups as $group)
                        <option>{{ $group->title }}</option>
                    @endforeach
                </select>
            </td>
            <td><input type="number" name="number" id="a1"></td>
            <td><input type="number" name="price" id="a2"></td>
            <td><input type="number" name="total_price" id="a3"></td>
            <td class="text-center">
                <button class="btn btn-danger remove"
                  type="button">Remove</button>
                </td>
        </tr>`);

        $('#a1').keyup(calculate);
        $('#a2').keyup(calculate);
        function calculate(e)
        {
            $('#a3').val($('#a1').val() * $('#a2').val());
        }
      });

      $('#tbody').on('click', '.remove', function () {
        var child = $(this).closest('tr').nextAll();
        child.each(function () {
          var id = $(this).attr('id');
          var idx = $(this).children('.row-index').children('p');
          var dig = parseInt(id.substring(1));
          idx.html(`Row ${dig - 1}`);
          $(this).attr('id', `${dig - 1}`);
        });
        $(this).closest('tr').remove();
        rowIdx--;
      });

    });
 

Вы можете использовать $(this).closest("tr") , чтобы получить ближайший tr, где произошло переключение/изменение, а затем, используя то же самое, получить требуемые входные значения и добавить общее количество к вашим total_price входным данным .

Демонстрационный код :

 $(document).ready(function() {
  var rowIdx = 0;
  $('#addBtn').on('click', function() {
    $('#tbody').append(`<tr id="R${  rowIdx}">
            <td>${rowIdx}</td>
            <td>
                <select id="group" name="group" class="form-control form-select">
                    @foreach($groups as $group)
                        <option>{{ $group->title }}</option>
                    @endforeach
                </select>
            </td>
            <td><input type="number" min ="0" value="0" name="number"></td>
            <td><input type="number" min ="0" value="0" name="price"></td>
            <td><input type="number"min ="0" value="0" name="total_price"></td>
            <td class="text-center">
                <button class="btn btn-danger remove"
                  type="button">Remove</button>
                </td>
        </tr>`);

  });
  //on key up or change
  $(document).on("change keyup", "tbody input[type=number]", function() {
    var qty = 0,
      total = 0;
    //get closest tr
    var selector = $(this).closest("tr")
    //get numer amp; price from same row
    var number = parseInt(selector.find("[name=number]").val())
    var price = parseInt(selector.find("[name=price]").val())
    //add total in totalprice in same row
    selector.find('[name=total_price]').val(number * price);
    //loop thorugh each trs 
    $("#tbody tr").each(function() {
      //add value of each inputs
      qty  = parseInt($(this).find("[name=number]").val())
      total  = parseInt($(this).find("[name=total_price]").val())
    })
    //add result in dom..
    $("#qty").text(qty);
    $("#total").text(total);

  })


}); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody id="tbody"></tbody>
</table>
<button id="addBtn" type="button">Add</button> <br/>Total qty : <span id="qty"></span> <br/>Total price : <span id="total"></span> 

Вот версия селектора, которая может вам подойти.

 let parentTR = $(this).parents('tr')[0];
let resultInput = $(parentTR).find("#a3");
resultInput.val($(parentTR).find("#a1").val() * $(parentTR).find("#a2").val());