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

如何计算最终的Jquery总库存表格

1 个答案: