从表中删除行后如何重新计算列的总值

时间:2019-10-16 07:10:44

标签: jquery html

我正在尝试重新计算表格第3列的值的总和。在这里,我在“添加”按钮上添加行。在表中使用删除按钮添加行。我要在单击删除按钮以删除行后重新计算第三列的值。但是在删除行之后,这里的总数不会改变

在stackOverflow上我找到了解决方案,但没有答案满足我的要求

   //To recalculate after deleting
        function reCalculate() {
            var total = 0;
            var value=0;
            $("#Quantity").each(function () {
                debugger;
                value = $(this).text();
                // add only if the value is number
                if (!isNaN(value) && value.length != 0) {
                    total += parseInt(value);
                }
            });
            alert(total);
        }

          //To remove the row from the table
        function RemoveRow(button) {
                var row = $(button).closest("TR");
                var table = $("#table")[0];
                table.deleteRow(row[0].rowIndex);
                reCalculate();

            }

预期结果是正确重新计算该列中的所有值,但给出的总值为0

  <div class="container-fluid" id="orderContainer">
        <div class="table-responsive">
            <table class="table table-bordered" id="table">
                <tr>
                    <th>Product</th>
                    <th class="hidden"></th>
                    <th>Price</th>
                    <th>Quantity</th>
                    <th>Extended Amount</th>
                    <th></th>
                </tr>
                <tr id="enterOrder">
                    <td>
                        @Html.DropDownListFor(model => model.ProductId, Model.ProductsList, "Select Item", new { @class = "form-control", id = "ProductList", required = "required" })
                        <span class="error" id="errorForDropDown" style="color:red; display:none">This field is required</span>
                    </td>
                    <td class="hidden" id="ProductIdd"></td>
                    <td>
                        <div class="input-group">
                            <span class="input-group-addon">$</span>
                            <input id="UnitPrice" style="width:80px;" name="UnitPrice" class="form-control" readonly="readonly" />
                        </div>
                    </td>
                    <td><input id="Quantity" style="width:80px;" name="Quantity" type="number" class="form-control" oninput="CalculateExtendedAmount()" /></td>
                    <td>
                        <div class="input-group">
                            <span class="input-group-addon">$</span>
                            <input id="ExtendedAmount" style="width:80px;" name="ExtendedAmount" class="form-control" readonly="readonly" />
                        </div>
                    </td>
                    <td><input type="button" value="Add" id="addOrderRow" class="btn btn-primary" onclick="AddRow()" /></td>
                </tr>
            </table>
        </div>
        <div class="pull-right">
            <h3>Total</h3>
            <table class="table table-bordered" style="width:300px; border-width:medium; border-color:darkcyan">
                <tr>
                    <td>Total Items/Quantities</td>
                    <td><span id="TotalQuantity"></span></td>
                </tr>
                <tr>
                    <td>Order Total</td>
                    <td>$ <span id="TotalOrder"></span></td>
                </tr>
            </table>

            <button id="submitOrder" type="submit" class="btn btn-default" onclick="SubmitOrder()" disabled="disabled">Submit Order</button>
        </div>
    </div>
</div>

这是HTML。有2张桌子。一种是显示“添加”按钮上的添加行,另一种只是显示数量和extendedAmount的总数

0 个答案:

没有答案