Question

suppose i have gridview in my aspx page and gridivew has many rows and 3 columns. column are

select – checkbox, first name – textbox ,last name – textbox etc

i want to loop through gridview by jquery and read those textbox value from that row where check box is selected.

gridview look like

<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>   

i got jquery code to read textbox value from each row if checkbox is selected…here is code

 <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>

my concern is how to read data from txtFName & txtLName textboxes and label lblslno on each row. can anyone drive toward right code. thanks

i got a good solution….here it is

<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 is going to mangle the Ids of the textboxes. The easiest way would be to add a css class to the text boxes and then use that to find them:

<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>

EDIT: As suggested in the comments, they could then be found using the class selector:

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