javascript - 如何在 JavaScript 中的 forEach 循环的每一行上执行数学函数？

Question

我有一个由 forEach 循环(通过数据库循环)创建的表。我想做的是通过在每一行中乘以数量 x 费率来计算价格。我有一个 JavaScript 函数(boqMath)来执行此操作，但它仅适用于第一行(第一个循环)。我如何更改它以对每一行(所有循环)执行此数学运算？

表格:

<% user.myrates.forEach(function(myrates){ %>

    <tr>
        <td><input type='text' class='form-control' value = "<%= myrates.boqUnit %>"></td>
        <td><input type='text' class='form-control qty' oninput = "boqMath()"></td>
        <td><div class="input-icon"><i>$</i><input type='text' class='form-control rate' oninput="boqMath()" value="<%= myrates.boqRate %>"></div></td>
        <td><div class="input-icon"><i>$</i><input type='text' class='form-control price' oninput="boqMath()"></div></td>
        <td><button type="submit" name="submit" class="btn btn-primary">Add</button></td>
    </tr>       
<% }); %>

还有这个函数:

function boqMath(){

    var a = document.querySelector('.qty').value;
    var b = document.querySelector('.rate').value;
    var price = document.querySelector('.price');
    price.value = (Number(a) * Number(b)).toLocaleString();

}

Answer 1

将当前元素传递给 boqMath()。从这里您可以找到最接近的 tr，并获取该行中的输入。

function boqMath(element) {
    row = element.closest("tr");
    var qty = row.querySelector(".qty").value;
    var rate = row.querySelector(".rate").value;
    var price = row.querySelector(".price");
    price.value = (qty * rate).toLocaleString();
}

将 oninput = "boqMath()"> 更改为 oninput="boqMath(this)"