Stripe table rows with Prototype

I’ve spend a lot of time with Prototype last few days, and this is going to be my first post related to prototype. So let’s see how to stripe the table using prototype, I think you will be surprised how easy it is.

HTML for our table will look like

<table class="zebra">

We will also need some CSS to change the background of the even rows and to highlight the row mouse is over

table.zebra tr.even {
table.zebra tr:hover {

And now all we need is as simple as

$$('table.zebra tbody tr:nth-child(even)').each(function(tr) {

One thing to notice is that tr:hover selector won’t work in IE 6. If you care about IE6, solution could be to observe row for mouseover event and to add hover class dynamically.

You should add

$$('table.zebra tbody tr').each(function(tr) {
  tr.observe('mouseover', function() {

and change table.zebra tr:hover to

table.zebra tr.hover {

Looks like this won’t be a last post devoted to Prototype 😉

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s