Change color in ASP.Net GridView on Row Hover and Row Selected

Last Reply on Dec 29, 2011 02:58 AM By Adnaan

Posted on Dec 29, 2011 02:55 AM

Please provide me jQuery code for mouse hover and mouse click events for ASP.Net GridView

Below is my HTML markup

 

<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
		<tr>
			<th scope="col">Item</th><th scope="col">Price</th><th scope="col">Total</th>
		</tr><tr>
			<td>Shirt</td><td class="price">200</td><td class="total">0</td>
		</tr><tr>
			<td>Football</td><td class="price">30</td><td class="total">0</td>
		</tr><tr>
			<td>Bat</td><td class="price">22.5</td><td class="total">0</td>
		</tr>
	</table>

 

Posted on Dec 29, 2011 02:57 AM
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type = "text/css">
        .HoverRow{background-color:Aqua}
        .SelectedRow{background-color:Yellow}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=GridView1] tr').not($('[id*=GridView1] tr').hasClass("SelectedRow")).not($('[id*=GridView1] tr:first-child')).hover(function () {
                $(this).addClass('HoverRow'); /* HoverRow is a css class Here i apply background color */
            }, function () {
                $(this).removeClass('HoverRow');
            }).click(function () {
                $('[id*=GridView1] tr').removeClass("SelectedRow")
                $(this).addClass('SelectedRow');
            }); 
        });
    </script>
</head>
<body>
    <form id="form1">
    <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
		<tr>
			<th scope="col">Item</th><th scope="col">Price</th><th scope="col">Total</th>
		</tr><tr>
			<td>Shirt</td><td class="price">200</td><td class="total">0</td>
		</tr><tr>
			<td>Football</td><td class="price">30</td><td class="total">0</td>
		</tr><tr>
			<td>Bat</td><td class="price">22.5</td><td class="total">0</td>
		</tr>
	</table>
  </form>
</body>
</html>

Demo