php - 删除按钮错误 jQuery

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 5 年前。

Improve this 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();
}