在 ASP.NET CORE MVC 上使用 JavaScript 顯示運行總計

Question

我想在ZE06262222614BDEE31951D84C64E5E9FFZ復選框中查看ZE06262222614BDEE時的運行總額列運行，而無需重新加載頁面。 在這種情況下（見下圖），運行總計應打印出 38。Credit Amount 列是可編輯的，因此總金額應根據用戶輸入相應更新。

到目前為止我的看法

<table class="gridtable">
        <tr>
            <th>Select</th>
            <th>Submit Purchase Item Status Id</th>
            <th style="display:none;">Cart Order Id</th>
            <th>Customer Number</th>
            <th>Customer Name</th>
            <th>Serial Number</th>
            <th>Charged Amount</th>
            <th>Credit Amount</th>
            <th>State Tax</th>
            <th>Credit Tax</th>
            <th>Billing Start Date</th>
            <th>Billing End Date</th>
            <th>Invoice Number</th>
            <th>Invoice Date</th>
            <th style="display:none;">Cart Billable Item Id</th>
            <th>Quality</th>
        </tr>
        @for (int i = 0; i < Model.Count; i++)
        {
            <tr>
                <td>
                    @Html.EditorFor(model => model[i].Selected)
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].SubmitPurchaseItemStatusId)
                    @Html.HiddenFor(model => model[i].SubmitPurchaseItemStatusId)
                </td>
                <td style="display:none;">
                    @Html.HiddenFor(model => model[i].CartOrderId)
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].Custnmbr)
                    @Html.HiddenFor(model => model[i].Custnmbr)
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].Custname)
                    @Html.HiddenFor(model => model[i].Custname)
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].Serltnum)
                    @Html.HiddenFor(model => model[i].Serltnum)
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].ChargedAmt)
                    @Html.HiddenFor(model => model[i].ChargedAmt)
                </td>
                <td>
                    @Html.EditorFor(model => model[i].CreditChargedAmt)
                    @Html.ValidationMessageFor(model => model[i].CreditChargedAmt, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].StateTax)
                    @Html.HiddenFor(model => model[i].StateTax)
                </td>
                <td>
                    @Html.EditorFor(model => model[i].CreditStateTax)
                    @Html.ValidationMessageFor(model => model[i].CreditStateTax, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].BillStartDate)
                    @Html.HiddenFor(model => model[i].BillStartDate)
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].BillEndDate)
                    @Html.HiddenFor(model => model[i].BillEndDate)
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].Ordocnum)
                    @Html.HiddenFor(model => model[i].Ordocnum)
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].Docdate)
                    @Html.HiddenFor(model => model[i].Docdate)
                </td>

                <td style="display:none;">
                    @Html.HiddenFor(model => model[i].CartBillableItemId)
                </td>
                <td>
                    @Html.DisplayFor(model => model[i].Qty)
                    @Html.HiddenFor(model => model[i].Qty)
                </td>
            </tr>
        }
    </table> 

Answer 1

將THs放入THEAD和TBODY中行的rest，給TBODY一個ID然后使用

 function totalIt() { var total = 0; $("#someTotalContainer").html("0.00"); $(this).closest("tbody").find("input[type=checkbox]:checked").each(function() { var val = $(this).closest("tr").find("input.amt").val(); // or use the class of the input field total += isNaN(val) || val == ""? 0: +val; }); $("#someTotalContainer").html(total.toFixed(2)); } $(function() { $("#tbd").on("change", "input[type=checkbox]", totalIt); totalIt() });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="gridtable"> <thead> <tr> <th>Select</th> <th>Charged Amount</th> <th>Credit Amount</th> </tr> </thead> <tbody id="tbd"> <tr> <td><input type="checkbox"></td> <td>19</td> <td><input type="text" class="amt" value="19" /></td> </tr> <tr> <td><input type="checkbox"></td> <td>19</td> <td><input type="text" class="amt" value="19" /></td> </tr> </tbody> </table> $<span id="someTotalContainer"></span>