时间戳

首页 > 解决方案 > 在 ASP.NET CORE MVC 上使用 JavaScript 显示运行总计

javascript - 在 ASP.NET CORE MVC 上使用 JavaScript 显示运行总计

问题描述

我想在不重新加载页面的情况下选中 Select 复选框时显示 Credit Amount 列的运行总计。在这种情况下（见下图），运行总计应打印出 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>

标签： javascriptjqueryhtml

解决方案

将 TH 放在 THEAD 中，将其余行放在 TBODY 中，给 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>

推荐阅读