Forum:Alternative row colors in a table

I have a page that I update almost constantly, and I have the rows in the tables alternating colors, but I am doing this manually.

ie. bgcolor="#554444" for one row and bgcolor="#665555" for the next, but I have to re-organize them all the time, into a different order, so I have to manually change the bgcolor every time.

Here is the page, so you can see what I am talking about: http://www.wowwiki.com/Server:Ursin_US/Progression

How can I make the color's alternate automatically?

98.24.209.203 18:06, 21 April 2009 (UTC)
 * Wookieepedia was able to do this; see w:c:starwars:MediaWiki:Common.js. However, I'm not exactly sure what to copy and paste, it also fails for me. You may also have to copy w:c:starwars:MediaWiki:Functions.js. --Michaeldsuarez (Talk) (Deeds) 18:17, 21 April 2009 (UTC)


 * Aye, until more browsers support the more advanced CSS functions that do alternating line colours, JS is pretty much the only other option. 94.169.95.168 18:29, 21 April 2009 (UTC)


 * As how the code is designed on Wookieepedia it only adds #f9f9f9 so you should decide in a single color unless you are planing to add modifications to the code, an obvious reminder that non-js activated persons will not see this alternating colors. The codes you require are:

/* Source: http://www.dustindiaz.com/getelementsbyclass/ getElementsByClass, * which complements getElementById and getElementsByTagName, returns an array * of all subelements of node that are tagged with a specific CSS class * (searchClass) and are of the tag name tag. If tag is null, it * searches for any suitable elements regardless of the tag name. Example: * getElementsByClass('infobox', document.getElementById('content'), 'div') * selects the same elements as the CSS declaration #content div.infobox */ function getElementsByClass(searchClass, node, tag) { var classElements = new Array; if(node == null) node = document; if(tag == null) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var tester = new ClassTester(searchClass); for(i = 0, j = 0; i < elsLen; i++) { if(tester.isMatch(els[i])) { classElements[j] = els[i]; j++; }   }    return classElements; } function ClassTester(className) { this.regex = new RegExp('(^|\\s)' + className + '(\\s|$)'); } ClassTester.prototype.isMatch = function(element) { return this.regex.test(element.className); } // end getElementsByClass

function addAlternatingRowColors { var infoboxes = getElementsByClass('infobox', document.getElementById('content')); if(infoboxes.length == 0) return; for(var k = 0; k < infoboxes.length; k++) { var infobox = infoboxes[k]; var rows = infobox.getElementsByTagName('tr'); var changeColor = false; for(var i = 0; i < rows.length; i++) { if(rows[i].className.indexOf('infoboxstopalt') != -1) break; var ths = rows[i].getElementsByTagName('th'); if(ths.length > 0) continue; if(changeColor) rows[i].style.backgroundColor = '#f9f9f9'; changeColor = !changeColor; }   } }
 * Table must be wrap inside a div with class "infobox". Header cells will be ignored. Adding class "infoboxstopalt" to the table row (  or   ) will stop the alternation in that spot and below. If you do modifications i'm interested to see them once you finish, thanks --