使用jQuery計算GridView中的行總數和總計

Question

嗨，在下面的JavaScript代碼中，乘法運算是在txtQuantity即網格視圖中的文本框TemplateField）和price（即網格視圖中的BoundField）之間進行的。

我的問題是我的網格視圖同時具有txtQuantity和txtPrice作為TemplateFieldes

<ItemTemplate><asp:TextBox ID="txtprice" runat="server" Text='<%# Bind("Price") %>'></asp:TextBox></ItemTemplate>

<ItemTemplate><asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox></ItemTemplate>

我試圖修改Java腳本代碼

 $("[id*=lblTotal]", row).html(parseFloat($("[id*=txtprice]", row).html()) * parseFloat($(this).val()));

但是由於乘法，它給了我NaN

原始js代碼

 <script type="text/javascript"> $(function () { $("[id*=txtQuantity]").val("0"); }); $("[id*=txtQuantity]").live("change", function () { if (isNaN(parseInt($(this).val()))) { $(this).val('0'); } else { $(this).val(parseInt($(this).val()).toString()); } }); $("[id*=txtQuantity]").live("keyup", function () { if (!jQuery.trim($(this).val()) == '') { if (!isNaN(parseFloat($(this).val()))) { var row = $(this).closest("tr"); $("[id*=lblTotal]", row).html(parseFloat($(".price", row).html()) * parseFloat($(this).val())); } } else { $(this).val(''); } var grandTotal = 0; $("[id*=lblTotal]").each(function () { grandTotal = grandTotal + parseFloat($(this).html()); }); $("[id*=lblGrandTotal]").html(grandTotal.toString()); }); </script> 

Answer 1

您的代碼存在一些小問題，請嘗試以下操作：

 $(function () { $("[id*=txtQuantity").val("0"); }); $(document).on("change", "[id*=txtQuantity]", function () { if (isNaN(parseInt($(this).val()))) { $(this).val('0'); } else { $(this).val(parseInt($(this).val()).toString()); } }); $(document).on("keyup mouseup", "[id*=txtQuantity]", function () { if (!jQuery.trim($(this).val()) == '') { if (!isNaN(parseFloat($(this).val()))) { var row = $(this).closest("tr"); $("[id*=lblTotal]", row).html(parseFloat($("[id*=txtPrice]", row).val()) * parseFloat($(this).val())); } } else { $(this).val(''); } var grandTotal = 0; $("[id*=lblTotal]").each(function () { var value = $(this).html(); if(value != "") grandTotal = grandTotal + parseFloat(value); }); $("[id*=lblGrandTotal]").html(grandTotal.toString()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table cellspacing="5"> <tr> <td><input type="text" id="txtPrice1" value="100" /></td> <td><input type="text" id="txtQuantity1" value="1" /></td> <td><div id="lblTotal1" /></td> </tr> <tr> <td><input type="text" id="txtPrice2" value="200" /></td> <td><input type="text" id="txtQuantity2" value="2" /></td> <td><div id="lblTotal1" /></td> </tr> <tr> <td><input type="text" id="txtPrice3" value="300" /></td> <td><input type="text" id="txtQuantity3" value="3" /></td> <td><div id="lblTotal1" /></td> </tr> </table> <div id="lblGrandTotal" />