---
title: "Tabeller med getElement(ByClass?) och lite annat"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/103447-tabeller-med-getelement-byclass-och-lite-annat"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Tinwëlint"
published: "2004-05-12T16:01:29.000Z"
updated: "2004-05-13T14:38:56.000Z"
replies: 5
views: 511
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/103447-tabeller-med-getelement-byclass-och-lite-annat"
---

# Tabeller med getElement(ByClass?) och lite annat

## #1 — Tinwëlint, 2004-05-12T16:01Z

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>****

Permalänk: https://www.webforum.nu/p/103447

## #2 — dectgap, 2004-05-12T16:44Z

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>
```

Permalänk: https://www.webforum.nu/p/1345073

## #3 — Tinwëlint, 2004-05-12T18:33Z

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.

Permalänk: https://www.webforum.nu/p/1345110

## #4 — dectgap, 2004-05-12T19:47Z

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).

Permalänk: https://www.webforum.nu/p/1345155

## #5 — dectgap, 2004-05-13T06:10Z

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>
```

Permalänk: https://www.webforum.nu/p/1345275

## #6 — Tinwëlint, 2004-05-13T14:38Z

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.

Permalänk: https://www.webforum.nu/p/1345569

---

Tråden på webben: https://www.webforum.nu/amne/javascript/103447-tabeller-med-getelement-byclass-och-lite-annat