Changing GridView row on mouseover using jQuery

Raja
Posted by Raja under jQuery category on | Views : 7462
You can write following jQuery code to change the background color of the GridView rows on mouseover.

<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#tableParent table tbody tr").mouseover(function () {
$(this).toggleClass("highlightRow");
}).mouseout(function(){$(this).removeClass('highlightRow');})
});
</script>


This assumes that your GridView has been placed under a html div element like below
<div id="tableParent">
<asp:GridView ID="GridView1" runat="server" />
</div>


You will need to write a .css class also in your aspx or .css page that you would have refereed in the aspx page. The css class looks like below
<style>
.highlightRow
{
background-color:yellow;
}
</style>


Hope this will help somebody, feel free to respond.

Comments or Responses

Login to post response