Rollover-Effekte beim Berühren von Tabellenzellen sind mittlerweile bekannt (siehe Tipp 40). Wie lassen sich aber komplette Tabellenspalten verändern? Dazu werden im folgenden Beispiel W3C-DOM-Methoden eingesetzt (halbwegs DOM-fähige Browser sind also Voraussetzung). Die Funktion SpaltenFaerben() übernimmt zwei Parameter: den gewünschten Farbwert und die Spaltennummer. Auf die Tabelle wird über die vergebene ID="testtab" zugegriffen. Danach werden die tr-Elemente abgefragt, deren td-Kindelemente bezüglich der Spaltennummer die eigentlichen Adressaten der sich anschließenden Farbänderung sind. Letztere erfolgt mittels object.style.backgroundColor-Zuweisung.

      JavaScript-Funktion:

      function SpaltenFaerben(farbe,spalte)
      {
        if(document.getElementById && document.getElementsByTagName)
        {
          var tab=document.getElementById("testtab");
          var tabtr=tab.getElementsByTagName("tr");
          for(i=0;i<tabtr.length;i++)
          {
            tabtr[i].childNodes[spalte-1].style.backgroundColor=farbe;
          }
        }
      }


      Markup:

      <TD OnMouseOver="SpaltenFaerben('#FF0000',1)"
        OnMouseOut="SpaltenFaerben('#FFFFCC',1)">1</TD> ...

      

Während man bei der spaltenweisen Farbänderung jedes einzelne <td>-Tag der jeweiligen Spalte mit den Event-Handlern nebst Funktionsaufruf bestücken muss, gestaltet sich die Prozedur bei Reihen wesentlich einfacher. Hier reicht es bereits aus, entsprechend in <tr>-Tags verpackte Zugriffe auf this.style.backgroundColor zu verwenden.

Mozilla und seine Derivate ermöglichen HOVER-Effekte – wie hier schon beschrieben – auch ohne separates Scripting (siehe Tipp 87).