Using the Style Object for Zebra Tables with CSS and JavaScript - Using the previous JavaScript function to build a zebra table
(Page 4 of 4 )
As I stated in the previous section, I’d like to finish this tutorial by showing you a practical example, where the modified version of the “buildZebraTable()” JavaScript function is put to work to dynamically decorate a regular (X)HTML table, and turn it into a zebra one via the “style” object.
That being said, please pay attention to the following code example, which demonstrates how to use this useful JavaScript function. Here it is:
<!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 (uses the 'style' object)</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;
}
</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 background color to even and odd rows
trows[j].style.backgroundColor=!evenFlag?'#eeeeee':'#cccccc';
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 (uses the 'style' object)</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>
As you can see in the above example, a conventional (X)HTML table is first built into a basic web document, and then properly styled with the “buildZebraTable()” function. In addition, since the function utilizes the “style” object to assign the background colors to the even and odd rows of the table, no additional CSS classes need to be defined.
To complete this basic example of building a zebra table with the “style” JavaScript object, I included a screen capture that shows the visual appearance of the table just built:
With all of this material at your disposal, you’re equipped with the required background to start building your own zebra tables. As you learned in the course of these tutorials, there are different approaches to building them; which one you choose depends on your personal needs.
Final thoughts
Sad but true, we’ve come to the end of this series. The overall experience has been instructive, however, since you've hopefully learned different approaches to building basic zebra tables without having to perform this annoying task all by yourself from scratch.
So, the next time a web application requires displaying tabular data by way of a zebra table, don’t forget to keep all the code samples developed in this series at hand.
See you in the next web development tutorial!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
