我正在尝试重新计算表格第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的总数