Editing Forum:Alternative row colors in a table

{{Forumheader|Help desk}}

<!-- Please put your content under this line.  Be sure to sign your edits with four tildes: ~~~~ -->

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?

[[Special:Contributions/98.24.209.203|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]]. --'''[[User:Michaeldsuarez|Michaeldsuarez]] <sup>([[User talk:Michaeldsuarez|Talk]]) ([[Special:Contributions/Michaeldsuarez|Deeds]])</sup>''' 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. {{User:Kirkburn/Sig}} 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:

<pre><nowiki> /* 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;
        }
    }
 }
 addOnloadHook(addAlternatingRowColors);</nowiki></pre>
::: Table must be wrap inside a div with class "infobox". Header cells will be ignored. Adding class "infoboxstopalt" to the table row ( <code>tr</code> or <code>|-</code> ) will stop the alternation in that spot and below. If you do modifications i'm interested to see them once you finish, thanks --{{User:Cizagna/Sig.css|20:05, 21 April 2009 (UTC)}}
:You appear to be asking for WoWWiki, why you would ask here instead of on WW itself baffles me, but the technique to do this (already implemented before this discussion) is to specify the table as class="zebra".  See also [[wowwiki:User:Pcj/Zebra tables]]. --[[wowwiki:User:Pcj|Pcj]] ([[wowwiki:User talk:Pcj|T]]&bull;[[wowwiki:Special:Contributions/Pcj|C]]) 23:25, 29 April 2009 (UTC)

::::Correct me if I'm wrong, the getElementsByClass function is already in allinone.css. :) --[[User:koisuru|<span style="color:darkviolet">ko</span><span style="color:#bbbbff; font-size: 80%">イsuru</span>]]&nbsp;('''[[User talk:koisuru|<span style="color:royalblue">talk</span>]]''') 17:27, 30 April 2009 (UTC)
:::::Right, in [http://images.wikia.com/common/releases_200904.5/skins/common/wikibits.js Wikibits.js] but in my case i copy the function long before it was include on that page and i have not clean up as i have to write that the function is Dependant on functions that are not display on the js page. --{{User:Cizagna/Sig.css|18:01, 30 April 2009 (UTC)}}
@@ Line 80: / Line 80: @@
 ::::Correct me if I'm wrong, the getElementsByClass function is already in allinone.css. :) --[[User:koisuru|<span style="color:darkviolet">ko</span><span style="color:#bbbbff; font-size: 80%">イsuru</span>]]&nbsp;('''[[User talk:koisuru|<span style="color:royalblue">talk</span>]]''') 17:27, 30 April 2009 (UTC)
 :::::Right, in [http://images.wikia.com/common/releases_200904.5/skins/common/wikibits.js Wikibits.js] but in my case i copy the function long before it was include on that page and i have not clean up as i have to write that the function is Dependant on functions that are not display on the js page. --{{User:Cizagna/Sig.css|18:01, 30 April 2009 (UTC)}}
-----
-Provided you make your tables sortable you don't need to do all that is mentioned above -- the functionality is already included in Mediawiki! Simply add the following line to MediaWiki:Common.js:
- var ts_alternate_row_colors = true;
-Then add the following lines to MediaWiki:Common.css:
- tr.odd { background: colorhere; }
- tr.even { background: colorhere; }
-If you want this to fire on a non-sortable class, you'll need to do what was mentioned above. [[User:Surgo|Surgo]] 00:56, February 24, 2010 (UTC)