Overview of jQuery - HTML5 Programming for ASP.NET Developers - page 47

The GridView control renders itself as an HTML table in the browser. The GridView shown in Figure 2-6
has alternate rows displayed with different CSS styles. Also, the header row is displayed with another CSS
style. Further, the rows show a highlighted marker when the mouse pointer hovers over them. Clicking any
row displays the EmployeeID of that row in an alert box. All this is done through jQuery. The <script> block
from the web form reveals the jQuery code shown in Listing 2-7.

Listing 2-7. Marking Odd and Even Rows with Different Styles
$(document).ready(function () {
$("#GridView1 th").parent().addClass("HeaderRow");
$("#GridView1 tr:not(.HeaderRow):odd").addClass("Row");
$("#GridView1 tr:not(.HeaderRow):even").addClass("AlternateRow");
$("#GridView1 tr:not(.HeaderRow)").hover(function () {
$(this).addClass('HoverRow');
}, function () {
$(this).removeClass('HoverRow');
}).click(function () {
if ($(this).hasClass("HeaderRow")) {
alert("This is header row. Can't get EmployeeID!");
}
else {
alert("You selected Employee ID :" + $("td:irst", this).text());
}
});
});

The code shown in Listing 2-7 uses a combination of selectors discussed earlier in this section and a
few additional filters. First, the code sets a CSS class for the header row of the table. Notice how the <th>
elements from a specific GridView (with ID GridView1 ) are selected. This way, even if there are multiple
tables on the same web form, the styling is applied only to GridView1 . The parent() method returns a
parent element of <th> ( <tr> in this case), and the HeaderRow CSS class is applied to that table row using
the addClass() method.
The next two lines of code select all the odd and even rows from the table excluding the header row.
This is done using the :not() , :odd , and :even selectors. The :not() selector ensures that the header row
isn't selected for applying odd and even styling. The :odd and :even selectors return odd and even
elements, respectively. Once selected, the CSS classes Row and AlternateRow are applied to them,
respectively.
Next, a mouse-hover effect is added to the table rows using the hover() method. The first parameter to
the hover() method is a function that is called when the mouse pointer enters a table row, and the second
parameter is a function that is called when the mouse pointer leaves that table row. In the callback
functions, the keyword this represents the current table row. The hover() method functions essentially
add and remove the HoverRow CSS class to the table row under consideration.

In any jQuery event handler, the keyword this refers to the DOM element to which the event handler is n Note

attached.

Notice the use of the jQuery chaining feature while wiring the click event handler. Instead of again
selecting the rows and then wiring their click event handler, you can wire event handlers for the hover and
click events at the same time.