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

Adnaan

SOLVED CLOSED ACTIVE ANSWERED
User: Adnaan
Posted: on Dec 29, 2011 02:55 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 10273

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>

Download FREE API for Word, Excel and PDF in ASP.Net

Mudassar

1 1

Reply
ANSWER
User: Mudassar
Replied: on Dec 29, 2011 02:57 AM
Report

<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

Adnaan

0 2

Reply
User: Adnaan
Replied: on Dec 29, 2011 02:58 AM
Report

Thanks a lot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

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

Company

Explore

Follow us

Contact Us