如何計算最終的Jquery總庫存表格

Question

我創建了簡單的庫存控制系統。 庫存控制包括產品代碼，產品名稱，價格，數量，數量，刪除按鈕。 填寫所有字段並單擊“添加”按鈕后，它將成功添加到清單表單下方的表格行中。 我的問題是，一一添加價格后，我最終無法計算未顯示在總計文本框中的最終總計，如果要刪除該項目，請單擊“刪除”按鈕，但該項目未在同一時間成功刪除不會減少。 我曾多次嘗試解決上述問題，但無法解決。 拜托，任何人都會幫助我解決上述問題。謝謝。到目前為止，我已經附上了編碼。

 function addproduct() { var product = { barcode: $("#barcode").val(), pname: $("#pname").val(), pro_price: $("#pro_price").val(), qty: $("#qty").val(), total_cost: $("#total_cost").val(), button: '<button type="button" class="btn btn-warning btn-xs")">delete</button>' }; addRow(product); } function addRow(product) { var $tableB = $('#product_list tbody'); var $row = $("<tr><td><Button type='button' name = 'record' class='btn btn-warning btn-xs' name='record' onclick='deleterow()' >Delete</td>" + "<td>" + product.barcode + "</td><td class=\\"price\\">" + product.pname + "</td><td>" + product.pro_price + "</td><td>" + product.qty + "</td><td>" + product.total_cost + "</td></tr>"); $row.data("barcode", product.product_code); $row.data("pname", product.product_name); $row.data("pro_price", product.price); $row.data("qty", product.qty); $row.data("total_cost", product.total_cost); $row.find('deleterow').click(function(event) { deleteRow($(event.currentTarget).parent('tr')); }); $tableB.append($row); onRowAdded($row); } function deleterow() { $(this).parents("tr").remove(); } function deleteRow(row) { $(row).remove(); onRowRemoved(); } function updateTotal() { var total = $('table tbody tr').toArray().reduce(function(pre, post) { return pre + parseFloat($(post).data('total_cost')); }, 0); $('table tfoot .total').text(total); } function onRowAdded(row) { updateTotal(); } function onRowRemoved(roe) { updateTotal(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <caption> Add Products </caption> <tr> <th>Product Code</th> <th>Product Name</th> <th>Price</th> <th>Qty</th> <th>Amount</th> <th style="width: 40px">Option</th> </tr> <tr> <form class="card" id="frmProject"> <td> <div> <input type="text" class="form-control" placeholder="barcode" id="barcode" name="barcode" required> </div> </td> <td> <label id="pro_name" name="pname" id="pname"></label> <input type="text" class="form-control" placeholder="barcode" id="pname" name="pname" disabled > </td> <td> <input type="text" class="form-control pro_price" id="pro_price" name="pro_price" placeholder="price" disabled> </td> <td> <input type="number" class="form-control pro_price" id="qty" name="qty" placeholder="qty" min="1" value="1" required> </td> <td> <input type="text" class="form-control" placeholder="total_cost" id="total_cost" name="total_cost" > </td> <td> <button class="btn btn-success" type="button" onclick="addproduct()">Add </button> </td> </form> </tr> </table> <table class="table table-bordered" id="product_list"> <caption> Products</caption> <thead> <tr> <th style="width: 40px">Remove</th> <th>Product Code</th> <th>Product Name</th> <th>Unit price</th> <th>Qty</th> <th>Amount</th> </tr> </thead> <tbody></tbody> </table> <div class="form-group" align="left"> <label class="form-label">Total</label> <input type="text" class="form-control" placeholder="Total" id="total" name="total" size="30px" required> </div> 

Answer 1

我不確定，但我認為您在這里錯了：

$('table tfoot .total').text(total);

因為total不是類而是id

嘗試這個：

$('#total').val(total);