только первая строка была рассчитана автоматически с помощью jquery

Question

У меня есть эта таблица, в которой есть столбец для кнопки редактирования.Появится модальное окно, и данные из выбранной строки отобразятся при нажатии кнопки.

, поэтому на моем модальном редакторе у меня есть 3 текстовых поля: Количество, Потреблено и Доступно.

$('#edit-quant').keyup(function() {
  var quant;
  var consumed;
  quant = parseFloat($('#edit-quant').val());
  consumed = parseFloat($('#edit-consumed').val());
  avail = quant - consumed || 0;
  $("#edit-avail").val(avail);
});

$('#edit-consumed').keyup(function() {
  var quant;
  var consumed;
  quant = parseFloat($('#edit-quant').val());
  consumed = parseFloat($('#edit-consumed').val());
  avail = quant - consumed || 0;
  $("#edit-avail").val(avail);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group mb-3">

  <span class="input-group-text" style="color: #008080"><label>Quantity</label></span>
  <input class="form-control" type="text" id="edit-quant" name="edit-quant" placeholder="Quantity" value="2"></i>

  <span class="input-group-text" style="color: #008080"><label>Consumed</label></span>
  <input class="form-control" type="text" id="edit-consumed" name="edit-consumed" placeholder="Consumed" value="3">

  <span class="input-group-text" style="color: #008080"><label>Available</label></span>
  <input class="form-control" id="edit-avail" type="text" name="edit-avail" placeholder="Available" value="4" readonly>

</div>

, и когда я пытаюсь изменить значения количества и потребляется и вычисляет его Доступно.работал только первый ряд таблицы.исходящие строки остаются прежними.как я могу это исправить?

Answer 1

Полагаю, вы повторили это.У вас не должно быть атрибута id, который был бы одинаковым для любых двух или более элементов на одной странице.Когда вы выбираете элемент по его id, будет возвращен первый найденный элемент с этим значением.

Что вы можете сделать, это превратить их в классы, а затем получить поля, вы можете найти.closest(".input-group"), который охватывает все ваши поля.Оттуда вы можете получить любое из полей по их заданному классу.Либо просто используйте атрибут name в полях и избавьтесь от идентификатора вместе.

<div class="input-group mb-3">
     <span class="input-group-text" style="color: #008080"><label>Quantity</label></span>
     <input class="form-control" type="text" name="edit-quant" placeholder="Quantity" value="{{$med->med_quantity}}" ></i>   

     <span class="input-group-text" style="color: #008080"><label>Consumed</label></span>
     <input class="form-control"  type="text" name="edit-consumed" placeholder="Consumed" value="{{$med->med_consumed}}">

     <span class="input-group-text" style="color: #008080"><label>Available</label></span>
     <input class="form-control" type="text" name="edit-avail"  placeholder="Available" value="{{$med->med_available}}" readonly>
</div>

Я удалил атрибуты id из трех полей.Теперь, когда наше событие сработает, мы найдем группу (родительский DIV) и получим каждое поле с .find().

$('input[name = "edit-quant"], input[name = "edit-consumed"]').keyup(function()
{
    var $group   = $(this).closest('.input-group');
    var quant    = parseFloat($group.find('input[name = "edit-quant"]').val());
    var consumed = parseFloat($group.find('input[name = "edit-consumed"]').val());

    $group.find('input[name = "edit-avail"]').val(quant - consumed || 0);
});

Не проверено, но должно работать для вас или, по крайней мере, заставить васправильный путь.