JQuery

This article was made for people that hate to manually assign classes over and over again to HTML elements like: tr's, td's, li's, etc. There is an easier way to do it without the fuss of making sure you didn't forget something. My solution is to use jQuery.

Ever since implementing jQuery in my web design, I've been able to design quicker and make my designs more interactive.

The code snippet I'll be using will help do the following:

First Things First

The first thing you have to do is to include jQuery in the head or end of your HTML document. See jQuery for specific instructions beyond how I recommend.

What I do is include the following at the end of my document:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Zebra Striping

If you don't know what zebra striping is, you'll recognize it once I tell you. Zebra striping is when you alternate the colors of your HTML elements. It's most commonly used on table rows, so that will be the example I use and what my code covers. The easiest way to add zebra striping is to add an even and odd class to each tr. This can get monotonous and can be easy to make mistakes. So it's much easier to dynamically add these classes when possible.

Here is the code I use to add the odd and even classes:

$('tbody tr:nth-child(odd),li:nth-child(odd)').addClass('odd'); $('tbody tr:nth-child(even),li:nth-child(even)').addClass('even');

First-Child / Last-Child

Sometime understanding what elements are the first and last elements can help to style things like list-items. I use first-child and last-child mostly to remove borders on menus, but there are plenty of other uses like changing text-alignment in a table column.

Here is the code that I use to add first-child and last-child classes to specific elements:

$('li:first-child,th:first-child,td:first-child').addClass('first-child'); $('li:last-child,th:last-child,td:last-child').addClass('last-child');

Hover

My code takes care of cross-browser compatibility issues with the psuedo-class :hover. In the past the only HTML tag that work with the :hover psuedo-class is <a>. Newer more modern browser will respond to this psuedo-class.

Here is the code that I use to add a hover class to elements:

$('li,input,textarea,tr').hover( function(){ $(this).addClass('hover'); },function(){ $(this).removeClass('hover'); });

Table Examples

Here's the table code I'm using:

<table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tfoot> <tr> <th></th> <th></th> <th></th> </tr> </tfoot> <tbody> <tr> <td>Table Data 1.1</td> <td>Table Data 1.2</td> <td>Table Data 1.3</td> </tr> <tr> <td>Table Data 2.1</td> <td>Table Data 2.2</td> <td>Table Data 2.3</td> </tr> <tr> <td>Table Data 3.1</td> <td>Table Data 3.2</td> <td>Table Data 3.3</td> </tr> <tr> <td>Table Data 4.1</td> <td>Table Data 4.2</td> <td>Table Data 4.3</td> </tr> <tr> <td>Table Data 5.1</td> <td>Table Data 5.2</td> <td>Table Data 5.3</td> </tr> </tbody> </table>

Boring Table

Header 1 Header 2 Header 3
Table Data 1.1 Table Data 1.2 Table Data 1.3
Table Data 2.1 Table Data 2.2 Table Data 2.3
Table Data 3.1 Table Data 3.2 Table Data 3.3
Table Data 4.1 Table Data 4.2 Table Data 4.3
Table Data 5.1 Table Data 5.2 Table Data 5.3

Table w/ New Dynamic Classes Added

Header 1 Header 2 Header 3
Table Data 1.1 Table Data 1.2 Table Data 1.3
Table Data 2.1 Table Data 2.2 Table Data 2.3
Table Data 3.1 Table Data 3.2 Table Data 3.3
Table Data 4.1 Table Data 4.2 Table Data 4.3
Table Data 5.1 Table Data 5.2 Table Data 5.3

CSS Sample

Here's a sample of the CSS I use to style the table:

tr.odd td{background:#fff} tr.even td{background:#eee} tr:hover td,tr.hover td{background:#DFF2BF} /* :hover used for modern browsers */ th:last-child,th.last-child,td:last-child,td.last-child{text-align:right} /* :hover used for modern browsers */

Horizontal Menu Items (Using UL LI)

Horizontal menus can be tricky when it comes to creating seperators. Why not just use a border instead of a pipe.

Horizontal menu done like this (less code):

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul>

Instead of like this (unnecessary code):

<ul> <li>Item 1</li> <li>|</li> <li>Item 2</li> <li>|</li> <li>Item 3</li> <li>|</li> <li>Item 4</li> <li>|</li> <li>Item 5</li> </ul>

Without First-Child / Last-Child

With First-Child / Last-Child

CSS Sample

This is a sample of the CSS I use to remove the border:

.menu li{border-left:1px solid;padding:3px 10px;margin:0} /* sets border on all li's for that menu */ .menu li:first-child,.menu li.first-child{border-left:0} /* :first-child used with modern browsers */

Hover Input Elements

You've already seen an example of hovering a table row and having the whole row change colors, well I wanted to show you an input field.

Here's the example of hoverable input fields:



JQuery Sample

Here is the code that I use to add a hover class to elements:

$('li,input,textarea,tr').hover( function(){ $(this).addClass('hover'); },function(){ $(this).removeClass('hover'); });

CSS Sample

input[type='text'].hover,textarea.hover{background:#DFF2BF}

More

There are tons more things you can do with JQuery. It's very web designer friendly and easy to look at and understand. That's why JQuery is my JavaScript Library of choice.

I recommend taking some time and understanding the code I've given example to so you can leverage the ability to dynamically assign classes to your HTML documents. JQuery can help clean up your code by allowing you to:

About Brandon Buttars

Brandon Buttars

I am a web designer, search engine optimizer, blogger, writer, graphic designer, wannabe programmer, blah blah internet guru. I do just about everything required in building websites and applications. I'm also a father to 2 boys, soon to be 3, and married happily to my wonderful wife. I'm trying to balance my personal life and my entrepreneurial tendencies.

Back to Blog