jQuery 循环通过 ASP.NET gridview asp.net

Question

假设我的 aspx 页面中有 gridview，而 gridivew 有很多行和 3 列。列是

选择 - 复选框，名字 - 文本框，姓氏 - 文本框等

我想通过 jquery 循环遍历 gridview 并从选中复选框的那一行读取那些文本框值。

gridview 的样子

<asp:GridView
    id="GridView1"
    DataSourceID="srcMovies"
    DataKeyNames="Id"
    Runat="server" AutoGenerateColumns="false">

<asp:TemplateField>
    <ItemTemplate>
    <asp:Label ID="lblslno" runat="server" />    
    </ItemTemplate>
</asp:TemplateField>

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

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

</Columns>
</asp:GridView>   

如果选中复选框，我有 jquery 代码从每一行读取文本框值...这里是代码

 <script type="text/javascript">
 $(document).ready(function () {
     var sum = 0;
     $('#btn1').click(function () {
         $('#tr').each(function () {
             if ($(this).find('input:checkbox').attr("checked"))
                 sum += parseInt($(this).find('input:text').attr("value"));
         });
         window.alert(sum.toString());
     });
 });
</script>

我关心的是如何从 txtFName 和 txtLName 文本框读取数据并在每一行上标记 lblslno。任何人都可以朝着正确的代码前进。谢谢

我有一个很好的解决方案....在这里

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
    var jsonData = new Array();
    $(".getJSON").click(function() {
        $.map($("table[id*=gvPurchaseOrderDetails] tr"), function(item, index) {
            if ($(item).find("input[type=text]").length>0) {
                jsonData[index] = new Object();
                jsonData[index].employeeid = $(item).find("input[type=text][id*=employeeid]").val();
                jsonData[index].employeename = $(item).find("input[type=text][id*=employeename]").val();
                jsonData[index].sex = $(item).find("select[id*=sex]").val();
                jsonData[index].graduate = $(item).find("input[type=checkbox][id*=graduate]").attr("checked");
            }
        });

        var jsonStringData = JSON.stringify(jsonData);
    });
});

<asp:GridView ID="gvPurchaseOrderDetails" runat="server"
    AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="employeeid">
            <ItemTemplate>
                <asp:TextBox ID="employeeid" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="employeename">
            <ItemTemplate>
                <asp:TextBox ID="employeename" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
       <asp:TemplateField HeaderText="sex">
            <ItemTemplate>
                <asp:DropDownList ID="sex" runat="server" ><asp:ListItem>Male</asp:ListItem><asp:ListItem>Female</asp:ListItem></asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Is Graduate">
            <ItemTemplate>
                <asp:CheckBox ID="graduate" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<a class="getJSON" href="#">get json data</a>

Answer 1

GridView 将破坏文本框的 ID。最简单的方法是向文本框添加一个 CSS 类，然后使用它来查找它们：

<asp:TemplateField>
    <ItemTemplate>
        <asp:TextBox ID="txtFName" CssClass="FName" runat="server" />    
    </ItemTemplate>
</asp:TemplateField>

<asp:TemplateField>
    <ItemTemplate>
        <asp:TextBox ID="txtLName" CssClass="LName" runat="server" />    
    </ItemTemplate>
</asp:TemplateField>

编辑：按照 cmets 中的建议，然后可以使用类选择器找到它们：

$(this).find('.LName').val()