Table JavaScript: Alternating columns

September 6, 2007 | Uncategorized | 0 Comments

Here's a simple script for enabling alternating CSS classes on a table.

// ALT script
function createAlternatingRows(table, className) {
var tbodys = table.getElementsByTagName('tbody');
if (tbodys.length > 0) 
table = tbodys[0];
var rows = table.getElementsByTagName('tr');
for (var i=0; i<rows.length; i++) {
if (i%2==0) rows[i].className = className;
}
}
createAlternatingRows(document.getElementById('myTable'), 'alt'); 

Just send it a table and a classname it and it handle the rest. It's setup to ignore <thead> and <tfoot> tags and it will overwrite other classes.

Leave a Reply

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by AB-WebLog.com.