Tabeller med getElement(ByClass?) och lite annat

Jag har ett script som letar igenom alla tabeller på en sida och ger varannan rad en klass. Detta för att ge varannan rad en annan bakgrundsfärg. Det kommer ursprungligen härifrån:
http://www.alistapart.com/articles/zebratables (fast inte originalet, en modifierad version inskickad till forumet: http://www.alistapart.com/discuss/zebratables/3#c7034 )
Raden som tar ut tabellerna ser ut såhär:

var tables = document.getElementsByTagName(”table”);

Men jag skulle vilja att den bara tog ut de tabeller som har en särskild klass. Hur ska jag skriva då?

Sen är det ett annat problem när det lägger till klasser på tabellraderna. Det ser ut såhär:
(trs *är alla <tr> i tabellen (eller snarare i <tbody>n))

if (! hasClass(trs*) && ! trs*.style.backgroundColor) {
trs*.className = even ? ”even” : ””;
}
// flip from odd to even, or vice-versa
even = ! even;

När jag vill ha en annan klass också på <tr>en så blir det ett litet fel i Opera. Raden ovanför blir inte riktigt rätt. Ni kan kolla själva på:
http://www.karlshagen.net/anders/stripetest/test.html
css-filen:
http://www.karlshagen.net/anders/stripetest/stripes.css
js-filen:
http://www.karlshagen.net/anders/stripetest/stripes.js

Jag läste att den där metoden (som jag inte riktigt förstår) inte var helt bra när man skulle lägga till flera klasser.
Här står det nåt om det men det fattar jag inte heller :-(
http://www.alistapart.com/discuss/zebratables/4#c7078****

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.