Delphinidin

In the late nineties, during the explosive growth of the Internet and the World Wide Web, tables were oft en used for page design and layouts, which is not what they were originally intended for. The problem with using tables for design and layout stems from their lack of support for semantic principles, where content is separated from design, and the usage of nested tables, which add unnecessary page bloat to your code and lead to an accessibility and maintainability nightmare. Nested tables occur when you create a page layout with table upon table nested into each other to match up to a complex design. Most Web designers and developers are now able to work purely with HTML and CSS to create semantic designs that no longer use tables for layout and therefore separate the content from the presentation layers. HTML tables were used improperly because alternative layout options did not exist until the advent of CSS — even then, browsers didn't support CSS correctly for quite a few years. Tables have a really bad reputation, but if they're used correctly for tabular data, they can be quite useful for showing data in a clean, structured format. In the following chapter, I share some ways to enhance your tabular data using jQuery.

- Adding Alternating Row Colors Using Filters
Zebra striping is a common practice used by Web designers to make table rows easier to read by adding a background color to each even or odd row, an example of zebra striping from the Web site for Performable (www.performable.com). Zebra striping can be done using backend programming languages such as PHP or ASP.net, but the downside is that a developer must be involved. The :even and :odd filters in jQuery make it incredibly easy to add this styling to any table. Set up a document ready function and, within it, add two statements to select the odd and even rows using filters. The first statement selects all of the even rows and applies the CSS property background:#dedede (light gray). The second statement is just to ensure that all of the odd rows have a background of white.

$(document).ready(function() {
$('tbody tr:even').css('background','#dedede');
$('tbody tr:odd').css('background','#ffffff');
});

- Adding a Simple Hover Effect to Rows
You can increase the interactivity of your tables by adding a hover effect to all the rows in your table. As in the following example, it could be as simple as adding a different color background to the table row as the user moves their mouse over each row.

1. Set up a document ready handler and attach a hover event to the tr element. The beauty of the selector is that it will automatically apply to all of the rows in the table and attach a hover event, with just a few lines of code.

$(document).ready(function(){
$('tr').hover(function() {
}, function() {
});
});

2. Add two statements into the hover functions, one for mouseenter and one for mouseleave. On mouseenter, the background color changes to pink and on mouseleave, the background color changes back to white using the this keyword to point to the current tr element that the event has been triggered on.

$(document).ready(function(){
$('tr').hover(function() {
$(this).css('background','pink');
}, function() {
$(this).css('background','white');
});

- Adding an Advanced Hover Effect to Rows

If you want to get more complex, you can add a hover effect that displays editing options to the user. This type of user interface solution is oft en used to show editing capabilities alongside inline editing. Set up a document ready handler with a hover event attached to the table row (tr) element. Create two selector statements; one each for the mouseenter and mouseleave events. For the fi rst statement (mouseenter), use the this keyword and attach the after method to insert the HTML anchor tag into the DOM (document object model). The first statement appends the Edit Me link into all of the children of the row that is being hovered over. The second statement removes the editme element aft er the mouse has been moved off.

$(document).ready(function(){
$('tr').hover(function() {
$(this).children().append('<div class="editme"><a href="">Edit Me</a></div>');
}, function() {
$('.editme').remove();
});
});