Skip to content

The Easiest Zebra

Say what?

It’s more JQuery stuff, so if you care not a jot, then hie thee hence.

OK, so there are a million ways of generating zebra-striped tables. If you don’t know what a zebra-striped table is, then you probably don’t need to. But if you do, then you may be familiar with methods like this and this. That’s all good.

(By the way, I realise that an even better way to do this is to generate the stripes by writing the alternate classes out on the server-side, but for the purposes of this post I’m assuming that can’t be done. Imagine the table’s being retrieved by AJAX or something, so client-side code has to be the way.)

With the awesomeness of jQuery, this is how you do it:

<script type="text/javascript">
$(document).ready(function(){
$("table.stripeThis tr:even").addClass("striped");
});
</script>

See that? One check to see if the DOM’s loaded, then one line of code. And that would apply to all tables on the page with the CSS class “stripeThis”.

Nifty.
–c.

UPDATE: Here’s a sample page. View the source. See? :-)

One Comment

  1. Ross wrote:

    Oh, that’s good…

    Like, *really* neat.

    I’m still using a bastardised version of the example on http://www.alistapart.com

    Friday, September 29, 2006 at 3:11pm | Permalink

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*