Advanced CSS Tables II – Using Mootools JavaScript For Alternate Row Colors

By  on  

As I discussed in Advanced CSS Tables - Using CSS3 For Alternate Row Colors, we will eventually be able to use the ":nth-child(argument)" pseudo-class in CSS3 to provide alternate row background colors. What do we use in the mean time? You can explicitly code your page using CSS classes to do the job, but that's far too painful if you aren't using server-side scripting. Even if you do use server-side scripting, your page could become quite bloated from rows and rows of "class='color-me'" in your code. I've put together a very simple MooTools snipped that will save you lots of programming time and download time for your users.

Adding the Code

There are three parts to the process: the CSS, the JavaScript, and the XHTML table we will create.

The CSS is rather easy. We'll create one class for the table (which will serve as an identifier -- we may not want all tables on the page to be shaded, right?) and two classes for the odd and even row formatting:

.shade-table	{ /* just to remind us we're using this -- we don't want to write over it later! */ }
.odd		{ background:#ccc; padding:3px; }
.even		{ background:#eee; padding:3px; }

Now that we've defined the CSS, we need to insert the Mootools JavaScript code into the <head> section of the page:

window.addEvent('domready', function() {
	var count = 0;
	$$('table.shade-table tr').each(function(el) {
		el.addClass(count++ % 2 == 0 ? 'odd' : 'even');
	});
});

Now we're set. The only remaining step is place the table with the designated class declaration to the body of the page:

<table class="shade-table" border="1" cellpadding="5" cellspacing="2"><tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tbody></table>

Voila! Mootools' easy function make the entire process a snap. The only downside to this method is that a user with JavaScript disabled wont see the newly added background colors. It could be worth it to you to save the bandwidth depending on your website's audience.

Recent Features

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    Introducing MooTools ScrollSpy

    I've been excited to release this plugin for a long time. MooTools ScrollSpy is a unique but simple MooTools plugin that listens to page scrolling and fires events based on where the user has scrolled to in the page. Now you can fire specific...

  • By
    Advanced CSS Printing &#8211; Using JavaScript Double-Click To Remove Unwanted DIVs

    Like any good programmer, I'm constantly searching around the internet for ideas and articles that can help me improve my code. There are thousands of talented programmers out there so I stumble upon some great articles and code snippets that I like to print out...

Discussion

  1. You don’t need count. Array::each has a second argument, the index (and a third, the Array itself).

    MooTools 1.11:

    $$(’table.shade-table tr’).each(function(el, i) {
        el.addClass((i % 2) ? ‘even’ : ‘odd’);
    });
    

    MooTools 1.2 (dev)

    $$(’table.shade-table tr:odd’).addClass(‘odd’);
    
  2. Thank you for your post and insights digitarald! Taking the count var out of play will make the code a little cleaner and easier.

    I’ve enjoyed your work with MooTools and continued success!

  3. Puneet Madaan

    you don’t need that heavy increment loop.. All new Browsers have inbuilt capability for this.

    in mootools way, a easy way to achived by..

    $$('tr:even').setStyle('background-color', '#ccc');
    $$('tr:even').setStyle('background-color', '#eee');
    
  4. Puneet Madaan

    anyways, this site offers great resources :) will visit it often :)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!