Jquery: Working with ASp.net GridView Control

Highlighting rows/cells of a GridView on hover

<form id="form1" runat="server">
<div align="center">
<fieldset style="width:400px;height:230px;">
<table border="0" cellpadding="3" cellspacing="3">
<tr><td colspan="2" class="header">BOOK CATALOG</td></tr>
<tr>
<td colspan="2">
<asp:GridView ID="GridView1" SkinID="Professional"
runat="server">
</asp:GridView>
</td>
</tr>
</table>
</fieldset>
</div>
</form>

style:

.highlight
{
background-color:#9999FF;
}



<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#<%=GridView1.ClientID%> tr").hover(
function() {
$(this).addClass("highlight");
},
function() {
$(this).removeClass("highlight");
});
});
</script>


The preceding jQuery solution can be modified slightly to achieve the same effect on a
GridView cell instead of a GridView row.


$("#<%=GridView1.ClientID%> td").hover(
function() {
$(this).addClass("highlight");
},
function() {
$(this).removeClass("highlight");
});



Retrieving the content of a GridView cell on click

<form id="form1" runat="server">
<div align="center">
<fieldset style="width:400px;height:230px;">
<table border="0" cellpadding="3" cellspacing="3">
<tr><td colspan="2" class="header">BOOK CATALOG</td></tr>
<tr><td colspan="2">
<asp:GridView ID="GridView1" SkinID="Professional"
runat="server">
</asp:GridView>
</td></tr>
</table>
</fieldset>
<br />
<div id="message"></div>
</div>
</form>

Style:

.highlight
{
background-color:#9999FF;
}



<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#<%=GridView1.ClientID%> tr").filter(":not(:has(table,
th))").click(function(e) {
var $cell = $(e.target).closest("td");
$("#<%=GridView1.ClientID%> td").
removeClass("highlight");
$cell.addClass("highlight");
$("#message").text('You have selected: ' + $cell.
text());
});
});
</script