Daniel Hasler: Tabellenzeilen abwechslungsweise einfärben

SELF-Forum

Tabellenzeilen abwechslungsweise einfärben

Daniel Hasler
– Informationen zu den Bewertungsregeln

Hallo!
Ich hab ein kleines Script geschrieben, damit die Zeilen abwechseln eingefärbt werden.

function altRow()
{
 var tables,rows,i,j;
 tables=document.getElementById("bodytable").getElementsByTagName("table");

for(i=0;i<tables.length;i++)
 {
  rows=tables[i].getElementsByTagName("tr");
  for(j=0;j<rows.length;j++)
  {
   if (j%2==0)tables[i].rows[j].className="rowbackalt";
  }
 }
}

Das ganze funktioniert auch ganz gut. Wenn jedoch der Zelleninhalt eine weitere Tabelle ist (Tabelle in Tabelle) wird zwar alles richtig umgesetzt aber es wird ein Error ausgegeben (rows[...] ist Null). Wie kann ich dem Script klarmachen, dass es sich nur auf die Zeilen (tr) der ersten Tabelle konzentrieren soll.

Ich danke im Voraus

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Tabellenzeilen abwechslungsweise einfärben

    Sebastian Becker
    – Informationen zu den Bewertungsregeln

    Hallo, Daniel,

    in der Zeile

    if(j%2==0)tables[i].rows[j].className="rowbackalt";

    ist "tables[i]." zuviel!

    Ich hab' Dein Skript mal nachgebaut (mit 2 + 2 Tabellen) und optimiert und es funktioniert jetzt im Prinzip.

    Allerdings erhalten die Tabellen in den Tabellen jetzt auch wechselnde Hintergrundfarben. Wenn das nicht erwünscht ist, musst Du das Skript natürlich noch entsprechend abändern ...

    Grüße,

    Sebastian

    <style>
    .rowback {
    background: #EFEFEF;
    }
    .rowbackalt {
    background: #CCCCCC;
    }
    </style>

    <script>

    function altRow()
    {
    tables=document.getElementsByTagName("table");
    for(i=0;i<tables.length;i++) {

    // zum Testen
    // alert(tables.length);
    // alert(tables[i].id);

    rows=tables[i].getElementsByTagName("tr");
    for(j=0;j<rows.length;j++)rows[j].className=j%2==0?"rowbackalt":"rowback";
    }
    }

    </script>

    <body onLoad="altRow();">

    <table width="100" id="table1">
    <tr>
    <td>1</td>
    </tr>
    <tr>
    <td>2</td>
    </tr>
    <tr>
    <td>

    <table width="50" id="table2">
    <tr>
    <td>3.1</td>
    </tr>
    <tr>
    <td>3.2</td>
    </tr>
    <tr>
    <td>3.3</td>
    </tr>
    </table>

    </td>
    </tr>
    <tr>
    <td>4</td>
    </tr>
    <tr>
    <td>5</td>
    </tr>
    </table>

    <table width="100" id="table3">
    <tr>
    <td>1</td>
    </tr>
    <tr>
    <td>2</td>
    </tr>
    <tr>
    <td>

    <table width="50" id="table4">
    <tr>
    <td>3.1</td>
    </tr>
    <tr>
    <td>3.2</td>
    </tr>
    <tr>
    <td>3.3</td>
    </tr>
    </table>

    </td>
    </tr>
    <tr>
    <td>4</td>
    </tr>
    <tr>
    <td>5</td>
    </tr>
    </table>

    </body>

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln