Javascript 总和返回 NaN 错误

Question

我使用下面的 JavaScript 代码来获取 gridview 的行总计和总计

但问题是总计 $mult 返回 NaN

输出我得到

Item Name    Unit Price    UOM    Quantity    Total Amount

item1        5.00          pcs      2          10.00

item2        10.00         pcs      3          30.00      

                                               NaN

JavaScript

<script>
    $(document).ready(function () {
        $(".txtMult input").on('keyup mouseup', multInputs);
        function multInputs() {
            var $mult = 0;
            $("tr.txtMult").each(function () {
                var $UnitPrice = $('.UnitPrice', this).val();
                var $Quantity = $('.Quantity', this).val();
                var $total = (($UnitPrice) * ($Quantity));
                $mult += $total;

            });

            $("tr.txtMult").each(function () {
                var $UnitPrice = $('.UnitPrice', this).val();
                var $Quantity = $('.Quantity', this).val();
                $('.multTotal', this).text(parseFloat($total).toFixed(3));
            });
            $(".lblGrandAmount").text(parseFloat($mult).toFixed(3));
        }
    });
</script>

GridView

<asp:GridView ID="griditem" OnRowDataBound="griditem_RowDataBound" CssClass="table" GridLines="None" runat="server" ShowFooter="True" AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField HeaderText="Select">
            <ItemTemplate>
                <asp:CheckBox ID="chkSel" Checked="true" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>

        <asp:BoundField DataField="ItemName" HeaderText="Item Name" SortExpression="Item Name" />
        <asp:TemplateField HeaderText="Unit Price" SortExpression="UnitPrice">
            <ItemTemplate>
                <asp:TextBox ID="txtCalcUnitprice"  TextMode="Number" step="any" Width="120" CssClass="form-control  UnitPrice" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Name" HeaderText="UOM" SortExpression="UOM" />

        <asp:TemplateField HeaderText="Quantity" SortExpression="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="txtCalcQty" Width="120" TextMode="Number" min="0" step="any" CssClass="form-control Quantity" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField HeaderText="Total Amount">
            <ItemTemplate>
                <asp:Label ID="lbltotalamount" CssClass="multTotal" runat="server"></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="lblgrandamount" CssClass="lblGrandAmount" runat="server"></asp:Label>
            </FooterTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="ItemID" HeaderText="ItemID" ItemStyle-CssClass="hiddencol" HeaderStyle-CssClass="hiddencol" SortExpression="ItemID" />

    </Columns>
</asp:GridView>

可能是什么问题导致此错误发生？

Answer 1

所有 tr 都具有类 txtMult，因此您需要排除 header tr 和总计 tr从计算来看。您可以使用:gt(0)和 :lt(-1)为此，如下所示。

$(".txtMult input").on('keyup mouseup', multInputs);

function multInputs() {
    var $mult = 0;

    $("tr.txtMult:gt(0):lt(-1)").each(function () {
        var $UnitPrice = $('.UnitPrice', this).val();
        var $Quantity = $('.Quantity', this).val();
        var $total = $UnitPrice * $Quantity;
        $mult += $total;

        $('.multTotal', this).text($total.toFixed(2));
    });

    $(".lblGrandAmount").text($mult.toFixed(2));
}