Assigning Background Colors Dynamically to Zebra Tables with CSS and JavaScript - Setting up a final hands-on example
(Page 4 of 4 )
If you’re a code eater like me, then most likely you’ll want to see a complete example that demonstrates how to integrate into a single (X)HTML file the JavaScript function that you learned before with the CSS styles and the structural markup of a sample zebra table.
Given these circumstances, below I listed the entire signature of a brand new (X)HTML file that creates a simple zebra table with the assistance of the aforementioned JavaScript function.
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</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>
Now that you have had the chance to examine the signature of the previous (X)HTML file, surely you’ll understand much more clearly how a zebra table is constructed by using the “buildZebraTable()” JavaScript function that I defined in the previous section.
As you can see, the table’s markup doesn’t include any “class” attributes, since its odd and even rows are styled dynamically with JavaScript, which assigns alternate background colors to each of them. Of course, the major advantage of this process is that you don’t have to get your hands dirty manually styling tens of table rows. This can be an extremely annoying and error prone task.
Finally, in order to complement the previous hands-on example, I included a screen capture that shows the look and feel of the zebra table just created with JavaScript. Here it is:
That final image is the perfect epilogue for this tutorial. With all the code samples shown earlier, you’re armed with a decent background to start building your own dynamic zebra tables, which means that there’s a lot of fun in your near future!
Final thoughts
In this second chapter of the series, I provided you with the right pointers to build zebra tables by way of a subtle combination of CSS and JavaScript, which completely automates the assignment of alternate background colors for the table’s even and odd rows.
In the upcoming article, things will get even more interesting, since I’ll be slightly modifying the signature of the previous “buildZebraTable()” JavaScript function, so it can work with zebra tables that incorporate <tbody> tags within their respective structures.
Don’t forget to read the next part, since I’ll be there waiting for you!
| 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. |
