How do I access selected column value in a GridView using Jquery

See more:

C#

ASP.NET

Javascript

.NET

HTML

, +

Hi friends,
I am comparatively new to the whole jQuery thing - hence this doubt. Let me first apologize for the long post - had to do it to make the context clear.
I have a GridView control defined in my aspx page which has a few columns, and the first column is a checkbox where the user can select a row. I have put down the defined GridView template code below.

<asp:GridView ID="GV_CDFDeviceList" runat="server" CellPadding="4" ForeColor="#333333"
                    GridLines="None" AutoGenerateColumns="False">
                    <RowStyle BackColor="#EFF3FB" />
                    <Columns>
                        <asp:TemplateField HeaderText="Select">
                            <ItemTemplate>
                                <asp:CheckBox ID="chkSelect" runat="server" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>                   
</asp:GridView>

Once the GridView is populated from server-side, the rendered grid looks something like this:

Select 		ColumnSomeId 		ColumnX 	ColumnY		ColumnZ
[checkbox]	   123			  xxx1		  yyy1		  zzz1
[checkbox]	   122			  xxx2		  yyy2		  zzz2
[checkbox]	   124			  xxx3		  yyy3		  zzz3

The HTML which get generated for this is shown below:

<table cellspacing="0" cellpadding="4" border="0" id="ctl00_content_GV_CDFDeviceList" style="color:#333333;border-collapse:collapse;">
		<tr style="color:White;background-color:#507CD1;font-weight:bold;">
			<th scope="col">Select</th><th scope="col">SomeId</th><th scope="col">ColumnX</th><th scope="col">ColumnY</th><th scope="col">ColumnZ</th>
		</tr><tr style="background-color:#EFF3FB;">
			<td>
                                <input id="ctl00_content_GV_CDFDeviceList_ctl02_chkSelect" type="checkbox" name="ctl00$content$GV_CDFDeviceList$ctl02$chkSelect" />
                            </td><td>123</td><td>xxx1</td><td>yyy1</td><td>zzz1</td>
		</tr>

		<tr style="background-color:#EFF3F1;">
			<td>
                                <input id="ctl00_content_GV_CDFDeviceList_ctl03_chkSelect" type="checkbox" name="ctl00$content$GV_CDFDeviceList$ctl03$chkSelect" />
                            </td><td>122</td><td>xxx2</td><td>yyy2</td><td>zzz3</td>
		</tr>

		<tr style="background-color:#EFF3FB;">
			<td>
                                <input id="ctl00_content_GV_CDFDeviceList_ctl04_chkSelect" type="checkbox" name="ctl00$content$GV_CDFDeviceList$ctl04$chkSelect" />
                            </td><td>124</td><td>xxx3</td><td>yyy3</td><td>zzz3</td>
		</tr>
</table>

The user may select any of the rows using the checkbox, and will click a button for further processing.

In the client-side, I want to build a json object with only the selected rows id column values, and then send this json string to the server using jQuery Ajax method.

I have made all this working, it does work fine. But I do have a doubt as to whether I am doing it the right way. The doubt I am having is in the jQuery code that does the selection of all selected rows.

See the code snippet of how I did it:

var isAnyDeviceSelected = AreAnyDevicesSelected();

                if (isAnyDeviceSelected) {
                    
                    var siteIds = new Array();
                    $(":checked").each(function(index) {
                        siteIds[index] = this.parentElement.nextSibling.innerHTML; //Retrieve Ids for the selected row.
                        
                    });

                    var jsonSiteIdList = "{ siteIdList: " + JSON.stringify(siteIds) + "}";

Now you see the part

siteIds[index] = this.parentElement.nextSibling.innerHTML;

I am not very happy with this. As you can see, I get to the checkbox node, then go to the parent element (which is the td element), then navigate to the next sibling of it, whose innerHTML is the id which I am looking for.

Finally, I get a list of all selected ids in the array, though I am not sure if I am doing it the right way. Need a code review from the jQuery/Javascript experts over there, and do let me know if there is a better way of doing this using jQuery.

EDIT: The id selection jQuery code is written based on the table structure rendered by the Gridview. So as long as the GridView HTML render logic strictly follows the same pattern of table-->tr--> td structure, this jQuery will never fail. The solution I am looking for is beyond this (I am not sure if I am going a lil far-fetched). Is it possible that the gridView will render the td for the siteid with an id of its own, so that my jQuery code is based on the td id and safe forever?

Thanks.