删除按钮错误jQuery

Question

我使用查询创建了一个简单的产品库存控制表单。

在填写完所有字段后，将包括（产品名称，价格，数量，数量），然后单击添加按钮，所有详细信息将成功添加到表格行中。

一一添加价格后，最后成功计算并显示最终总计。

我在产品旁边放置了删除按钮。

在特定行上点击delete按钮将成功删除它，但是一旦我从产品表中删除产品，最终的总金额并没有减少。

到目前为止，我还不知道如何降低价格。我写在下面。任何人都可以遍历代码并为其提供良好的解决方案？

表格

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

                        <td>

                            <input type="text" class="form-control" placeholder="barcode" id="barcode" name="barcode"  required>

                        </td>
                        <td>
                            <label id="pro_name" name="pname" id="pname"></label>
                            <input  type="text" class="form-control" placeholder="barcode" id="pname" name="pname"  >
                        </td>

                        <td>
                            <input type="text" class="form-control pro_price" id="pro_price" name="pro_price"
                                   placeholder="price" >
                        </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="number" 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>
  <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>

JQuery

<script>
 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);
        ///$('#frmProject')[0].reset();
    }
    var total=0;
    function addRow(product) {
        console.log(product.total_cost);
        var $tableB = $('#product_list tbody');
        var $row = $("<tr><td><Button type='button' name = 'record'  class='btn btn-warning btn-xs' name='record' onclick='deleterow(this)' >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);
        total += Number(product.total_cost);
        $('#total').val(total);
        console.log(product.total_cost);
        $row.find('deleterow').click(function(event) {
            deleteRow($(event.currentTarget).parent('tr'));
        });
        $tableB.append($row);
        onRowAdded($row);
    }
    function deleterow(e)
    {
        e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
        total -= Number(product.total_cost);
        $('#total').val(total);
    }
    function deleteRow(row) {
        console.log(product.total_cost);
        total -= Number(product.total_cost);
        $("#tot").val(tot);
        $(row).remove();
        onRowRemoved();
    }

    function updateTotal() {

    }

    function onRowAdded(row) {
        updateTotal();
    }

    function onRowRemoved(roe) {
        updateTotal();
    }


</script>

Answer 1

除了布莱恩·帕特森给你的答案。尝试在查询选择器中将#tot替换为#total。您的html中没有#tot元素。

function deleteRow(row) {
    console.log(product.total_cost);
    var total = $("#total").val(); //grab current total from html element
    total -= Number(product.total_cost);
    $("#total").val(total);
    $(row).remove();
    onRowRemoved();
}

Answer 2

您的函数无权访问total变量，请从html元素#total中获取它...

function deleteRow(row) {
        console.log(product.total_cost);
        var total = $("#total").val(); //grab current total from html element
        total -= Number(product.total_cost);
        $("#total").val(total);
        $(row).remove();
        onRowRemoved();
    }

Answer 3

也许喜欢这个：

   function deleterow(e){
       product_total_cost=parseInt($(e).parent().parent().find('td:last').text(),10);
       total-=product_total_cost;
       $('#total').val(total);
       $(e).parent().parent().remove();
    }

 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);
        ///$('#frmProject')[0].reset();
    }
    var total=0;
    function addRow(product) {
        console.log(product.total_cost);
        var $tableB = $('#product_list tbody');
        var $row = $("<tr><td><Button type='button' name = 'record'  class='btn btn-warning btn-xs' name='record' onclick='deleterow(this)' >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);
        total += Number(product.total_cost);
        $('#total').val(total);
        console.log(product.total_cost);
        $row.find('deleterow').click(function(event) {
            deleteRow($(event.currentTarget).parent('tr'));
        });
        $tableB.append($row);
        onRowAdded($row);
    }
    function deleterow(e){
       product_total_cost=parseInt($(e).parent().parent().find('td:last').text(),10);
       total-=product_total_cost;
       $('#total').val(total);
       $(e).parent().parent().remove();
    }
    function deleteRow(row) {

        console.log(product.total_cost);
        total -= Number(product.total_cost);
        $("#tot").val(tot);
        $(row).remove();
        onRowRemoved();
    }

    function updateTotal() {

    }

    function onRowAdded(row) {
        updateTotal();
    }

    function onRowRemoved(roe) {
        updateTotal();
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


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

                        <td>

                            <input type="text" class="form-control" placeholder="barcode" id="barcode" name="barcode"  required>

                        </td>
                        <td>
                            <label id="pro_name" name="pname" id="pname"></label>
                            <input  type="text" class="form-control" placeholder="barcode" id="pname" name="pname"  >
                        </td>

                        <td>
                            <input type="text" class="form-control pro_price" id="pro_price" name="pro_price"
                                   placeholder="price" >
                        </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="number" 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>
  <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>

Final total

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