Tabeller med getElement(ByClass?) och lite annat

Jag har inte hunnit titta så noga på alistapart-skriptet, men här är en lösning för tabeller med en speciell klass:

<script type="text/javascript">
window.onload=function(){
    var r, t = document.getElementsByTagName("TABLE");

    for(var i=0; i<t.length; i++){
        if(t[i].className && t[i].className == "zebra"){
            r = t[i].getElementsByTagName("TR");
            for(var j=0; j<r.length; j+=2)
                r[j].className = "udda";
        }
    }
}
</script>

<style type="text/css">
table.zebra tr      { background-color: #fff; }
table.zebra tr.udda { background-color: #ccc; }
</style>

...

<table class="zebra">
  <tr>
    <td>Zebra-tabell</td>
  </tr>
  <tr>
    <td>Zebra-tabell</td>
  </tr>
  <tr>
    <td>Zebra-tabell</td>
  </tr>
  <tr>
    <td>Zebra-tabell</td>
  </tr>
</table>

Du kan skriva så här istället, ifall du använder flera klasser per tabell:

<script type="text/javascript">
window.onload=function(){
    var r, t = document.getElementsByTagName("TABLE");

    for(var i=0; i<t.length; i++){
        if(t[i].className && /(^|\s)zebra(\s|$)/.test(t[i].className)){
            r = t[i].getElementsByTagName("TR");
            for(var j=0; j<r.length; j+=2)
                r[j].className = "udda";
        }
    }
}
</script>

Tack så mycket!
Nu tar det bara tabellerna med min särskilda klass.
Men det andra problemet kvarstår. (När den sista raden i min tabell ska få even och redan har en klass. Båda klasserna ska finnas med enligt mönstret <tr class="last even"> Jag tror det beror på sättet klassen läggs till i skriptet. Något som jag tror skulle vara en lösning föreslås här:
http://www.alistapart.com/discuss/zebratables/4#c7078
Men jag förstår den inte fullständigt!
Kan någon hjälpa mig tolka den?

Sedan märkte jag att du (dectgap) hade förkortat scriptet lite genom att ta bort uppletningen av elementet "tbody". Det är lite synd eftersom raderna som finns i <thead> inte ska få klassen. Nu klarar jag inte att fixa det själv (måste lära mig att programmera ordentligt) men jag har inte ansträngt mig så mycket än där.

Då ska vi se om det blev bättre:

<script type="text/javascript">
window.onload=function(){
    var b, r, t = document.getElementsByTagName("TABLE");

    for(var i=0; i<t.length; i++){
        if(t[i].className && /(^|\s)zebra(\s|$)/.test(t[i].className)){
            b = t[i].getElementsByTagName("TBODY") ? t[i].getElementsByTagName("TBODY")[0] : t[i];
            r = b.getElementsByTagName("TR");
            for(var j=0; j<r.length; j+=2)
                setClass(r[j],"udda");
        }
    }
}

function setClass(obj, classStr){
    if(obj.className=="")
        obj.className = classStr;
    else
        obj.className += " "+classStr;
}
</script>

<style type="text/css">
table.zebra tr      { background-color: #fff; }
table.zebra tr.udda { background-color: #ccc; }
</style>

...

<table>
  <tr>
   <td>Vanlig Tabell</td>
  </tr>
  <tr>
   <td>Vanlig Tabell</td>
  </tr>
  <tr>
   <td>Vanlig Tabell</td>
  </tr>
  <tr>
   <td>Vanlig Tabell</td>
  </tr>
</table>

<table class="zebra">
  <tr>
    <td>Zebra-tabell</td>
  </tr>
  <tr>
    <td>Zebra-tabell</td>
  </tr>
  <tr>
    <td>Zebra-tabell</td>
  </tr>
  <tr>
    <td>Zebra-tabell</td>
  </tr>
</table>

<table class="zebra">
  <thead>
  <tr>
    <th>Header</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Zebra-tabell</td>
  </tr>
  <tr>
    <td>Zebra-tabell</td>
  </tr>
  <tr>
    <td>Zebra-tabell</td>
  </tr>
  <tr>
    <td>Zebra-tabell</td>
  </tr>
  </tbody>
</table>

Om tabellen, men klassnamnet "zebra", innehåller något tbody-element färgas bara raderna i den. Om det inte finns något tbody-element används alla rader i tabellen.

Om det redan finns en klass på raden som ska få klassnamnet "udda" kommer den nya klassen att stoppas in på rätt sätt (med ett mellanslag före klassnamnet).

Lite ändringar eftersom jag inte tänkte på att det kan finnas flera tbody-element per table (även om jag inte förstår varför).

<script type="text/javascript">
window.onload=function(){
    var b, r, t = document.getElementsByTagName("TABLE");

    for(var i=0; i<t.length; i++){
        if(t[i].className && /(^|\s)zebra(\s|$)/.test(t[i].className)){
            b = t[i].getElementsByTagName("TBODY") || [t[i]];
            for(var j=0; j<b.length; j++){
                r = b[j].getElementsByTagName("TR");
                for(var k=0; k<r.length; k+=2)
                    setClass(r[k],"udda");
            }
        }
    }
}

function setClass(obj, classStr){
    if(obj.className=="")
        obj.className = classStr;
    else
        obj.className += " "+classStr;
}
</script>

Tack så jättemycket. Du är en räddande ängel!
Fortfarande så buggar färgen på den näst sista raden lite i Opera (Den raden ska ha den av javascriptet tilldelade klassen men har ingen annan klass innan. Den verkar inte få den klassen direkt. Istället får bara texten i den raden rätt bakgrund. Men om man däremot växlar fönster så blir det rätt sen.) men det ser jag som en bugg i Opera. Den sista speciella raden får sina båda klasser på rätt sätt. Återigen jättetack.