使用 Javascript 或 JQuery 获取多个 ID

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>

我有一个 function 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>

这完美地工作，但被硬编码以使用那些特定的 ID。 我的困境是用户可以动态地将行添加到该表中，而这仅适用于一行。 因此，如果用户再添加一行，显然上述内容是硬编码的，不适用于该新行。 为新行调用的 function 需要有效地看起来像这样：

<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>

所以我需要一些方法来动态选择替换 function 中的 ID，基于它实际上正在输入。我完全坚持想一个方法，有人可以帮忙吗？

Answer 1

我猜想{{...}}在这些td元素中创建input元素。

最小的改变就是改变

oninput="calculate()"

至

oninput="calculate(this)"

它将触发事件的元素传递到 function，然后在 function 中使用 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 变量命名约定。）

为了避免让它变得非常脆弱，我在最后一个querySelector调用的最终td中添加了一个 class 。

或者，如果您更喜欢 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);
}