javascript - 如何使用jquery计算一行中的某些字段

Question

我创建了一些代码来计算行中的某些字段。但我添加了一些功能，所以我可以使用 jquery 动态添加行。

这是我的 codepen 上的源代码点击here !

这是我计算 qtyItem 列和价格列的函数

$("tbody").keyup(function() {
    var qtyItem = parseFloat($("#qtyItem").val());
    var price = parseFloat($("#price").val());

    var subTotal = qtyItem * price;
    $("#subTotal").attr("value", subTotal);
  });

问题是当我尝试计算第一行时，它工作正常。但其他的不受我脚本中函数的影响。

Answer 1

ID 必须是唯一的，因此请避免重复。为此，您可以使用 Template_literals (请参阅代码段中的 ${nextIdx})。

您需要考虑 parseFloat 返回的 NaN 值

现在，在价格事件处理程序中，您可以更改策略:

• 获取父行
• 在具有 an id starting with 的子元素中查找一个元素

新代码现在是:

$(".addItem").click(function(e) {
    var nextIdx = $("table tbody tr").length + 1;
    var row = `<tr>
    <td><input type="text" class="form-control" name="itemName" id="itemName${nextIdx}"></td>
            <td><input type="number" class="form-control" name="qtyItem" id="qtyItem${nextIdx}"></td>
            <td><input type="number" class="form-control" name="price" id="price${nextIdx}"></td>
            <td><input type="number" class="form-control" name="subTotal" id="subTotal${nextIdx}"  readonly></td>
    </tr>`;
    $("table").append(row);
});

//subTotal count
$("tbody").keyup(function(e) {
    var crow = $(e.target).closest('tr'); // get parent row
    
    // find qtyItem in the children
    var qtyItem = parseFloat(crow.find("[id^=qtyItem]").val()) || 0;
    
    // find price in the children
    var price = parseFloat(crow.find("[id^=price]").val()) || 0;

    var subTotal = qtyItem * price;
    crow.find("[id^=subTotal]").attr("value", subTotal);
});

table,td, th{
    border: 2px, solid, black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form action="#">
    <label for="username">Username</label>
    <input id="username" type="text" placeholder="Input your username"> <br>
    <label for="date">Date</label>
    <input id="date" type="date"> <br>
    <label for="itemSold">Item List</label>
    <table>
        <thead>
        <tr>
            <th>Item</th>
            <th>Qty</th>
            <th>price</th>
            <th>SubTotal</th>
            <th></th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <button type="button" class="addItem">Add Item</button>
</form>