Homepage de.comp.lang.javascript
Homepage
de.comp.lang.javascript

FAQ de.comp.lang.javascript

FAQ
de.comp.lang.javascript

 

 

Bitte verwenden Sie als Einstiegsadresse in diese FAQ die Homepage der Newsgroup de.comp.lang.javascript. Der Aufenthaltsort dieser Seiten hier kann sich ohne Vorwarnung ändern.
 

 

Wie kann ich die Hintergrundfarbe einer Tabellenzelle ändern?

Ändern läßt sich die Hintergrundfarbe einer Tabellenzelle bei allen genannten Browsern (bei älteren haben Sie natürlich keine Chance). Das Problem besteht lediglich darin, dass wegen der vollkommen unterschiedlichen Objektmodelle jeder "eine persönliche Anrede" haben möchte. MSIEs und Netscape 6 gestatten es ohnehin, jede Zelle anzusprechen, am geschicktesten über id. Für Netscape 4 muß man dafür sorgen, dass die Zelle durch ein Layer-Objekt repräsentiert wird, also positionieren:

   <td id="Zelle4" style="position:relative">hier steht was</td>

Dann kommt man an die Hintergrundfarbe der Zelle (des Layers) so:

Navi 4:
document.layers["Zelle4"].bgColor
MSIE 4 und 5:
document.all["Zelle4"].style.backgroundColor
Netscape 6 und MSIE 5 gemäß DOM:
document.getElementById("Zelle4").style.backgroundColor

Das folgende Beispiel zeigt das Prinzip (Dankeschön übrigens an Wolfgang Schwarz; von ihm ist das Beispiel, er hat es oft genug in der Newsgroup gepostet.):

Zum Ausprobieren:

viel Holz  
  wenig Holz

Das Skript:

<script language="JavaScript" type="text/javascript">
<!--
function wxlBgCol(id,farbe) {
   if (document.all) 
      document.all[id].style.backgroundColor=farbe;
   else 
      if (document.getElementById)
         document.getElementById(id).style.backgroundColor=farbe;
      else 
         if (document.layers) 
            document.layers[id].bgColor=farbe;
}
//-->
</script>

Die Tabelle:

<table border=1>
<tr>
<td id="Zelle1" style="position:relative" bgcolor="white">
    <a href="javascript:void(0)" 
       onMouseOver="wxlBgCol('Zelle1','maroon')"
       onMouseOut="wxlBgCol('Zelle1','khaki')">viel Holz</a>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td id="Zelle4" style="position:relative" bgcolor=white">
    <a href="javascript:void(0)" 
       onMouseOver="wxlBgCol('Zelle4','seashell')"
       onMouseOut="wxlBgCol('Zelle4','black')">wenig Holz</a>
</td>
</tr>
</table>
top

Diese Seite ist Teil der de.comp.lang.javascript FAQ. Die Einstiegsadresse lautet http://www.dcljs.de/. Der Text der Seite wurde erstellt von Christine Kühnel (©).

 ______ letzte Änderung: 12/2012 ______ 

 
© S. Mintert, Ch. Kühnel