如何使用JavaScript在GridView行中的文本框求和?

时间:2019-04-22 07:34:08

标签: javascript asp.net

我有gridview,在单元格中包含一个文本框和一个复选框。默认情况下,文本框是禁用的。当选中同一单元格中的复选框时,它将启用。它将连续累加总值。我可以启用和禁用它。只有在默认情况下启用文本框,我也可以对总数求和。

<asp:GridView ID="GridView1" runat="server">
                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:TextBox ID="TextBox1" runat="server" class="data" Enabled="false"></asp:TextBox>
                            <br />
                            <asp:CheckBox ID="CheckBox1" runat="server" class="chk" />
                        </ItemTemplate>
                    </asp:TemplateField>

                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:TextBox ID="TextBox1" runat="server" class="data" Enabled="false"></asp:TextBox>
                            <br />
                            <asp:CheckBox ID="CheckBox1" runat="server" class="chk" />
                        </ItemTemplate>
                    </asp:TemplateField>

                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:Label ID="Label1" runat="server" Text="Label" class="rowTotal"></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

            <script type="text/javascript">
                //code to enable/disable textbox
                $(".chk").on("change", function () {
                    if (this.childNodes[0].checked) {
                        this.previousSibling.previousSibling.previousSibling.disabled = false;
                    }
                    else {
                        this.previousSibling.previousSibling.previousSibling.disabled = true;
                    }
                });

                //code to sum row value but didn't work if textbox disable from the first
                //$(document).ready(function () {
                //    $(".data").keyup(function () {
                //        var temp, total = 0, index;
                //        $(this).closest("tr").find(".data").each(function (i, item) {
                //            temp = parseFloat($(item).val());
                //            if (!isNaN(temp))
                //                total = total + temp;
                //        });
                //        $(this).closest("tr").find(".rowTotal").html(total);
                //    })
                //});
            </script>

我希望在选中复选框和用户更改文本框中的值时总计。

1 个答案:

答案 0 :(得分:0)

function sum(el){
var temp, total = 0, index;
$(el).closest("tr").find(".data").each(function (i, item) {
         temp = parseFloat($(item).val());
          if (!isNaN(temp))
               total = total + temp;
          });
 $(this).closest("tr").find(".rowTotal").html(total);
}
$(document).ready(function () { 
     sum($(".data"));
     $(".data").keyup(function () {
        sum($(this));
      })
 });

准备好文档并进行数据加密时,您需要求和。