Выбор значений из той же строки

Question

Мне нужно взять значение двух входных ячеек таблицы, а затем умножить их на последнее входное значение в той же строке. Мне нужно использовать селекторы классов, так как эти строки могут быть добавлены или удалены пользователем. Например, в строке 1 я хочу «ячейка 2 * ячейка 3 = ячейка 4» в строке 1.

$(document).on("change", ".p-cell, .s-cell", function() {
  var val1 = $(".p-cell").val();
  var val2 = $(".p-cell").next(".s-cell").val();
  var total = val1 * val2;
  $(".s-cell").next(".w-cell").val(total).trigger("input");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
  <td><input type="text" class="a-cell" /></td>
  <td><input type="number" class="p-cell" maxlength="2" value="0" /></td>
  <td><input type="number" class="s-cell" maxlength="2" value="1" /></td>
  <td><input type="number" class="w-cell" maxlength="3" value="0" /></td>
</tr>

Answer 1

Вы можете использовать closest, чтобы найти родительский tr, затем go вниз по DOM с find, чтобы получить фактические td s и значения.

$(document).on("change", ".p-cell, .s-cell", function () {
    var _parent = $(this).closest("tr");
    var val1 = _parent.find(".p-cell").val();
    var val2 = _parent.find(".s-cell").val();
    var total = val1 * val2;
    _parent.find(".w-cell").val(total).trigger("input");
});