An Improved Approach to Building Zebra Tables - Constructing zebra tables dynamically
(Page 2 of 4 )
Zebra tables can be automatically styled by way of a simple JavaScript function that should perform two well-differentiated tasks: first, it iterates over the markup of the selected table, and second, it alternately styles its respective even and odd rows in order to assign to each of them different background colors.
In the prior article of the series I demonstrated how to define a function, called “buildZebraTable(),” like the one described. It is implemented in the following way:
<!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</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">
function buildZebraTable(tableId){
var table=document.getElementById(tableId);
if(!table){return};
var evenFlag=false;
var rows=document.getElementsByTagName('tr');
for(var i=0;i<rows.length;i++){
rows[i].className=!evenFlag?'oddrow':'evenrow';
evenFlag=!evenFlag;
}
}
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</h1>
<table id="zebratable">
<tbody>
<tr>
<td><p>Content for cells of odd row goes here</p></td>
</tr>
<tr>
<td><p>Content for cells of even row goes here</p></td>
</tr>
<tr>
<td><p>Content for cells of odd row goes here</p></td>
</tr>
<tr>
<td><p>Content for cells of even row goes here</p></td>
</tr>
<tr>
<td><p>Content for cells of odd row goes here</p></td>
</tr>
<tr>
<td><p>Content for cells of even row goes here</p></td>
</tr>
<tr>
<td><p>Content for cells of odd row goes here</p></td>
</tr>
<tr>
<td><p>Content for cells of even row goes here</p></td>
</tr>
<tr>
<td><p>Content for cells of odd row goes here</p></td>
</tr>
<tr>
<td><p>Content for cells of even row goes here</p></td>
</tr>
</tbody>
</table>
</body>
</html>
After carefully examining the above hands-on example, you’ll realize that building a basic zebra table with JavaScript is actually a straightforward process that can be performed with minor hassles. For this specific case, the “buildZebraTable()” function accesses the target table by its ID attribute, iterates over its even and odd rows, and finally assigns the appropriate CSS classes to them in order to achieve the so-called zebra visual appearance. Pretty simple to grasp, right?
All right, at this moment you should feel pretty satisfied, since you learned how to automatically build zebra tables by way of a simple JavaScript function, without needing to style their rows from scratch. What else can you ask for?
Well, despite the fact that this glorious achievement does deserve throwing a party, there’s an important issue that must be addressed concerning the creation of zebra tables with a basic JavaScript function. As you may have noticed, the sample (X)HTML table that I just showed you contains only one <tbody> section, but a regular table may include many of them.
Thus, it’s necessary to slightly modify the signature of the “buildZebraTable()” JavaScript function so it can be used to work with tables that contains multiple <tbody> sections.
This modification will be performed in the course of the section to come, so I recommend you click on the link that appears below and keep reading.
Next: Working with tables that contain multiple tbody sections >>
More JavaScript Articles
More By Alejandro Gervasio
