Welcome to the educational series that shows how to build zebra tables with CSS and JavaScript. In this third tutorial of the series I’m going to show you how to improve the signature of the JavaScript function defined in the last article. This will make it suitable for working with tables that include different <tbody> sections.
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">
<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.
JavaScript 
Using the Style Object for Zebra Tables with CSS and JavaScript
