如何使用 JQuery 在 Html 表中执行减法

Question

Net MVC 和我在这方面面临一个问题。请帮助我。我正在创建一个项目，我只是在其中添加一个产品并在下表中显示总账单金额。我能够做到这一点，但是当我从表中删除项目时，我希望我的总账单金额也会发生变化，但这不会发生。

For example:- ProductName       Quantity    Price   Amount
              Fountain Pen       6           6       36         Remove
              Pencil             5           5       25         Remove
          
          TotalBill: 71 TotalQuantity: 11

          

现在，如果我从列表中删除 Pencil，我的 TotalBill 将为 36，但显示为 71。

请帮助我。我真的很感激。

<div class="modal-header">
    <h5 class="modal-title" id="modal-title">Create Purchase Order</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>

<div class="modal-body">
    <h5 style="color:blueviolet">Purchase Order Details</h5>
    <button type="button" class="btn btn-sm btn-success pull-right" style="margin-top:-31px;">Mark To Seller</button>
    <hr />
    @Html.HiddenFor(x => x.PurchaseID)
    @Html.HiddenFor(x => x.LoginID)
    @Html.HiddenFor(x => x.SupplierID)

    <div class="container">
        <div class="col">
            <div class="row-md-6">
                <div id="ui">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                @Html.LabelFor(x => x.SupplierName)
                                @Html.DropDownListFor(x => x.Supplier_ID, new SelectList(ViewBag.data, "Supplier_ID", "Supplier_Name"), "--Select Supplier Name--", new { @class = "form-control", @required = true })
                                @Html.ValidationMessageFor(x => x.SupplierName, "", new { @class = "text-danger" })
                            </div>

                            <div class="col-md-6">
                                @Html.LabelFor(x => x.Currency)
                                @Html.DropDownList("Currency", (IEnumerable<SelectListItem>)ViewBag.MeasureList, "--Select Currency Type--", new { id = "Currency", @class = "form-control", @required = true })
                                @Html.ValidationMessageFor(x => x.Currency, "", new { @class = "text-danger" })
                            </div>

                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                @Html.LabelFor(x => x.Date_Of_Purchase)
                                @Html.TextBoxFor(x => x.Date_Of_Purchase, "{0:dd-MM-yyyy}", new { id = "datepicker", @class = "form-control", autocomplete = "off", @required = true })
                                @Html.ValidationMessageFor(x => x.Date_Of_Purchase, "", new { @class = "text-danger" })
                            </div>

                            <div class="col-md-6">
                                @Html.LabelFor(x => x.Due_Date)
                                @Html.TextBoxFor(x => x.Due_Date, "{0:dd-MM-yyyy}", new { id = "datepicker1", @class = "form-control", autocomplete = "off", @required = true })
                                @Html.ValidationMessageFor(x => x.Due_Date, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <h5 style="color:blueviolet"> Order Details</h5>
    <hr />

    <div class="container">
        <div class="col">
            <div class="row-md-6">
                <div id="ui">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                @Html.LabelFor(x => x.ProductName)
                                @Html.DropDownListFor(x => x.Stock_ID, new SelectList(ViewBag.stock, "Stock_ID", "Stock_Name"), "--Select Product Name--", new { id = "StockID", @class = "form-control" })
                            </div>

                            <div class="col-md-6">
                                @Html.LabelFor(x => x.Quantity)
                                @Html.TextBoxFor(x => x.Quantity, new { id = "Quantity", @class = "form-control" })
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                @Html.LabelFor(x => x.Price)
                                @Html.TextBoxFor(x => x.Price, new { id = "Price", @class = "form-control" })
                            </div>

                        </div>
                        <div class="col-md-12">
                            <a id="addToList" class="btn btn-primary" style="margin-top:-38px; float:right; color:white; font-weight:400;">Add To List</a>
                        </div>

                    </div>

                    <table id="detailsTable" class="table">
                        <thead>
                            <tr>
                                <th style="width:20%">Product Name</th>
                                <th style="width:16%">Quantity</th>
                                <th style="width:16%">Price</th>
                                <th style="width:16%">Amount</th>
                                <th style="width:20%"></th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    <strong>TotalBill:</strong>
                    @Html.TextBoxFor(x => x.TotalAmount, new { @Value = 0, id = "totalamount", @class = "form-control", @readonly = "readonly" })
                </div>
            </div>
        </div>
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-sm" data-dismiss="modal">Cancel</button>
        <button type="button" id="saveOrder" onclick="CreateOrUpdate()" class="btn btn-sm btn-success pull-right">Save</button>
    </div>

</div>

<script>   
$("#addToList").click(function (e) {
    debugger;
    e.preventDefault();

    var productName = $("#StockID option:selected").text();
    var pid = $("#StockID option:selected").val();
    let price = $("#Price").val();
    let quantity = $("#Quantity").val();
    let detailsTableBody = $("#detailsTable tbody");

    var productItem = `<tr>
                            <td pid=${pid}>

                                ${productName}
                            </td>
                            <td>${quantity}</td>
                            <td>${price}</td>
                            <td>${(parseFloat(price) * parseInt(quantity))}</td>
                            <td><a data-itemId="0" href="#" class="deleteItem">Remove</a></td>
                        </tr>`;

    detailsTableBody.append(productItem);
    Bill();

    clearItem();
});



function Bill() {
    debugger;
    let price = $("#Price").val();
    let quantity = $("#Quantity").val();
    $('#totalamount').val(parseFloat($('#totalamount').val()) + (parseFloat(price) * parseInt(quantity)));
}

//After Add A New Order In The List, Clear Clean The Form For Add More Order.
function clearItem() {
    $("#StockID").val('');
    $("#Price").val('');
    $("#Quantity").val('');
}
// After Add A New Order In The List, If You Want, You Can Remove It.
$(document).on('click', 'a.deleteItem', function (e) {
    debugger;
    e.preventDefault();
    var $self = $(this);
    var total = 0;
    if ($(this).attr('data-itemId') == "0") {
        $(this).parents('tr').css("background-color", "#ff6347").fadeOut(800, function () {
            $(this).remove();
        });
    }
    $('.deleteItem').each(function () { total = total + parseInt($(this).val().trim()); });
    $('#totalamount').val(total);
});

请帮助我如何获得总数量。

Answer 1

根据您的代码，deleteItem 是一个锚，因此它没有value 或val，但您正在deleteItem 循环中寻找它。

我的建议是有一个函数，我们称之为calc_total，然后在delete 和add 函数的底部调用该函数。并为您的锚点提供一个数据属性，其中包含总行数（数量 * 价格）。

这将为您提供一个一致的函数来计算总数。

<a data-line_total="${(parseFloat(price) * parseInt(quantity))}" data-itemId="0" href="#" class="deleteItem">

function calc_total(){
    var total = 0;
    $('.deleteItem').each(function () { total = total + parseInt($(this).data("line_total")); });
    $('#totalamount').val(total);
}