如何计算最终的总 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);