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.
Next: Building zebra tables with the style JavaScript object >>
More JavaScript Articles
More By Alejandro Gervasio
