Home arrow JavaScript arrow Page 2 - Using the Style Object for Zebra Tables with CSS and JavaScript
JAVASCRIPT

Using the Style Object for Zebra Tables with CSS and JavaScript


Welcome to the final chapter of the series "Building Zebra Tables with CSS and JavaScript." In this article, I’ll teach you how to build zebra tables by using the popular “style” object, thus completing this educational four-part guide.

Author Info:
By: Alejandro Gervasio
Poor Best
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
July 02, 2008
TABLE OF CONTENTS:
  1. · Using the Style Object for Zebra Tables with CSS and JavaScript
  2. · Building zebra tables with JavaScript
  3. · Building zebra tables with the style JavaScript object
  4. · Using the previous JavaScript function to build a zebra table

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Using the Style Object for Zebra Tables with CSS and JavaScript - Building zebra tables with JavaScript
(Page 2 of 4 )

Before I proceed to show you how to use the “style” JavaScript object, first I’d like to list the complete source code of the web application that I developed in the last tutorial. It was capable of building the same type of tables, but in this particular case via the utilization of two different CSS classes.

That being said, have a quick look at the signature of the following (X)HTML file, which implements the JavaScript-based approach described above in order to build a primitive zebra table.

The corresponding code sample is as follows:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on building a simple zebra table with CSS and JavaScript (improved version)</title>

<style type="text/css">

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: bold 16pt Arial, Helvetica, sans-serif;

color: #000;

}

p{

font: normal 10pt Arial, Helvetica, sans-serif;

color: #000;

margin: 0;

}

#zebratable{

width: 40%;

text-align: center;

}

.oddrow{

background: #eee;

}

.evenrow{

background: #ccc;

}

</style>

<script language="javascript">

// define 'buildZebraTable()' function

function buildZebraTable(tableId){

var table=document.getElementById(tableId);

if(!table){return};

// get all <tbody> table elements

var tbodies=document.getElementsByTagName('tbody');

for(var i=0;i<tbodies.length;i++){

var evenFlag=false;

// get all <tr> table elements

var trows=document.getElementsByTagName('tr');

for(var j=0;j<trows.length;j++){

// assign CSS class to even and odd rows

trows[j].className=!evenFlag?'oddrow':'evenrow';

evenFlag=!evenFlag;

}

}

}

// run 'buildZebraTable()' function when web page is loaded

window.onload=function(){

if(document.getElementById&&document.
getElementsByTagName&&document.createElement){

buildZebraTable('zebratable');

}

}

</script>

</head>

<body>

<h1>Example on building a simple zebra table with CSS and JavaScript (improved version)</h1>

<table id="zebratable">

<tbody>

<tr>

<td><p>Content for cells goes here</p></td>

</tr>

<tr>

<td><p>Content for cells goes here</p></td>

</tr>

<tr>

<td><p>Content for cells goes here</p></td>

</tr>

<tr>

<td><p>Content for cells goes here</p></td>

</tr>

<tr>

<td><p>Content for cells goes here</p></td>

</tr>

</tbody>

<tbody>

<tr>

<td><p>Content for cells goes here</p></td>

</tr>

<tr>

<td><p>Content for cells goes here</p></td>

</tr>

<tr>

<td><p>Content for cells goes here</p></td>

</tr>

<tr>

<td><p>Content for cells goes here</p></td>

</tr>

<tr>

<td><p>Content for cells goes here</p></td>

</tr>

</tbody>

<tbody>

<tr>

<td><p>Content for cells goes here</p></td>

</tr>

<tr>

<td><p>Content for cells goes here</p></td>

</tr>

<tr>

<td><p>Content for cells goes here</p></td>

</tr>

<tr>

<td><p>Content for cells goes here</p></td>

</tr>

<tr>

<td><p>Content for cells goes here</p></td>

</tr>

</tbody>

</table>

</body>

</html>


As you can see, the previous hands-on example uses a simple JavaScript function called “buildZebraTable().” It comes in handy for styling the respective even and odd rows of a selected table. Of course, it’s worthwhile to highlight a detail that’s very important: in this specific case, the mentioned JavaScript function constructs the zebra table via a pair of CSS classes, which are assigned alternately to each table row. This is a process that sticks to the standards dictated by the W3 Consortium.

But is there any way to build a zebra table, other than working with CSS classes? The answer is an emphatic yes! As I suggested in the introduction, it’s possible to use the “style” JavaScript object to directly manipulate the background colors of the zebra table being constructed. Naturally, I have to mention again that this object isn’t a standard one, but the technique deserves a closer look.

Therefore, in the course of the following section, I’m going to show you how to utilize the“style” JavaScript object in order to create zebra tables with minor hassles.

Click on the link below and keep reading.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks
Find More JavaScript Tutorials

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 1 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials