Получить идентификаторы нескольких <td>в <tr>с Javascript или JQuery

Question

В моем html есть следующее:

<table id = 'manifest-table25' class="manifest-table2" width=100%>
                  <tbody width=100%>
                    <tr class="manifest-row">
                      <td width = 17.5%>{{form2.ProductCode}}</td>
                      <td width = 32.5%>{{form2.DescriptionOfGoods}}</td>
                      <td width = 12.5% class="quantity">{{form2.UnitQty}}</td>
                      <td width = 12.5%>{{form2.Type}}</td>
                      <td width = 12.5% oninput="calculate()">{{form2.Price}}</td>
                      <td width = 12.5%>{{form2.Amount}}</td>
                    </tr>
                  </tbody>
                </table>

У меня есть функция calculate(), называемая oninput для поля Price, которая умножает UnitQty * Price и отображает результат в Amount.

<script>

    function calculate() {
      var UnitQty = document.getElementById('id_form-0-UnitQty').value;
      var Price = document.getElementById('id_form-0-Price').value;
      var LineTotal = UnitQty * Price;
      $('#id_form-0-Amount').val(LineTotal);
}
</script>

Это прекрасно работает, но жестко запрограммировано для использования этих указанных c идентификаторов. Моя дилемма в том, что у пользователя есть возможность динамически добавлять строки в эту таблицу, и это будет работать только для одной строки. Таким образом, если пользователь добавляет еще одну строку, очевидно, что вышеприведенное является жестко закодированным и не применяется к этой новой строке. Функция, вызываемая для новой строки, должна была бы эффективно выглядеть следующим образом:

<script>

    function calculate() {
      var UnitQty = document.getElementById('id_form-1-UnitQty').value;
      var Price = document.getElementById('id_form-1-Price').value;
      var LineTotal = UnitQty * Price;
      $('#id_form-1-Amount').val(LineTotal);
}
</script>

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

Answer 1

Я собираюсь предположить, что {{...}} создает input элементы в этих td элементах.

Минимальное изменение заключается в изменении

oninput="calculate()"

на

oninput="calculate(this)"

, который передает элемент, по которому событие было вызвано, в функцию, а затем использует DOM-навигацию внутри функции:

function calculate(el) {
    // Find the row containing this cell
    var row = el.closest("tr");
    // Get the quantity from the `input` in the `.quantity` cell in this row
    var unitQty = row.querySelector('.quantity input').value;
    // Get the price from the `input` in this cell (could use `e.target` instead)
    var price = el.querySelector('input').value;
    // Do the calculation, assign to the `input` in the `.amount` cell in this row
    var lineTotal = unitQty * price;
    row.querySelector(".amount input").value = lineTotal;
}

(Примечание: я обновил этот код, чтобы он соответствовал стандарту JavaScript соглашения об именах переменных.)

Чтобы не делать это действительно fr agile, я добавил класс к финальному td для этого последнего querySelector вызова.

Или если вы предпочитаете jQuery:

function calculate(el) {
    // Find the row containing this cell
    var row = $(el).closest("tr");
    // Get the quantity from the `input` in the `.quantity` cell in this row
    var unitQty = row.find('.quantity input').val();
    // Get the price from the `input` in this cell (could use `e.target` instead)
    var price = $(el).find('input').val();
    // Do the calculation, assign to the `input` in the `.amount` cell in this row
    var lineTotal = unitQty * price;
    row.find(".amount input").val(lineTotal);
}