Here is a working demo on how this works.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Sub grdMovies_PreRender(ByVal sender As Object, ByVal e As EventArgs)
If grdMovies.Rows.Count > 0 Then
grdMovies.UseAccessibleHeader = True
'Adding the <thead> and <tbody> elements
grdMovies.HeaderRow.TableSection = TableRowSection.TableHeader
End If
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Gridview Cell Contents</title>
<style type="text/css">
.highlite
{
background-color:Gray;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".gv > tbody > tr:not(:has(table, th))")
.css("cursor", "pointer")
.click(function(e) {
$(".gv td").removeClass("highlite");
var $cell = $(e.target).closest("td");
$cell.addClass('highlite');
var $currentCellText = $cell.text();
var $leftCellText = $cell.prev().text();
var $rightCellText = $cell.next().text();
var $colIndex = $cell.parent().children().index($cell);
var $colName = $cell.closest("table").find('th:eq(' + $colIndex + ')').text();
$("#para").empty().append("<b>Current Cell Text: </b>"+ $currentCellText + "<br/>")
.append("<b>Text to Left of Clicked Cell: </b>"+ $leftCellText + "<br/>")
.append("<b>Text to Right of Clicked Cell: </b>" + $rightCellText + "<br/>")
.append("<b>Column Name of Clicked Cell: </b>" + $colName)
});
});
</script>
</head>
<body>
<form runat="server" id="form1">
<asp:SqlDataSource
id="srcMovies"
ConnectionString="<%$ ConnectionStrings:MyDatabase %>"
SelectCommand="SELECT Id,Title,Director FROM Movies"
Runat="server" />
<h3>Using a Gridview</h3>
<div class="tableDiv">
<asp:GridView
id="grdMovies"
DataSourceID="srcMovies"
DataKeyNames="Id"
OnPreRender="grdMovies_PreRender"
Runat="server" class="gv" />
<p id="para"></p>
</div>
</form>
</body>
</html>
We want to select only those rows which are inside the TBODY:
$(".gv > tbody > tr:not(:has(table, th))")
We have used ‘e.target’ to find out the element that was clicked. This object is cached in the ‘cell’ variable:
var $cell = $(e.target).closest("td");
The closest() as given in the jQuery documentation, “works by first looking at the current element to see if it matches the specified expression, if so it just returns the element itself. If it doesn't match then it will continue to traverse up the document, parent by parent, until an element is found that matches the
specified expression.”
With the help of the ‘cell’ variable, we can use the DOM tree traversal methods like prev() and next(), to retrieve the value of the immediate ‘preceding’ and ‘following’ elements, respectively.
var $leftCellText = $cell.prev().text();
var $rightCellText = $cell.next().text();
Similarly the column header text is retrieved using the code shown below.
var $colIndex = $cell.parent().children().index($cell);
var $colName = $cell.closest("table").find('th:eq(' + $colIndex + ')').text();
As shown above, after retrieving the column index, we use the closest() method to traverse up the DOM, parent by parent until we find the table element. The Header text is then selected using:
('th:eq(' + $colIndex + ')').text()