nicht angemeldet
Tabellenzeilenfarbe - Zeile1 weiß, Zeile2 grau, Zeile3 weiß...
Hallo
Wie lässt es sich realisieren, dass automatisch eine zeile einer Tabelle eine andere Farbe als die nächste hat?
Muss man da tatsächlich jede zeile einzeln "färben" oder gibt's dafür einen befehl/script?
P.S.: Ebay zeigt die suchergebnisse auch tabellen an welche unterschiedliche zeilenfarben haben.
Gruß Cee-Jay
-
Hi,
Wie lässt es sich realisieren, dass automatisch eine zeile einer Tabelle eine andere Farbe als die nächste hat?
Muss man da tatsächlich jede zeile einzeln "färben" oder gibt's dafür einen befehl/script?Es gibt tatsächlich Befehle in den neusten CSS-Entwicklungen, mit denen man sowas bequem implementieren kann. Allerdings läßt die Implementierung noch etwas auf sich warten. Ich empfehle Dir mit "konventionellen" CSS zu arbeiten, mit den Klassen:
http://selfhtml.teamone.de/css/formate/zentrale.htm#klassenMan definiert im Stylesheet eine Klasse mit einer bestimmten Farbe:
.rot { background-color:#FF0000; }
und bindet diese Klasse einfach in HTML-Element für die Zeile ein:
<tr class="rot">
<td>...</td>
</tr>Bei Spalten wird es aufwendiger; da muß man jede Tabellenzelle einzeln einer Klasse zuordnen. Ich empfehle Dir, einfach etwas mit Klassen rumzuspielen und den CSS-Abschnitt in Selfhtml zumindest aufmerksam zu überfliegen - ein mächtiges Werkzeug.
Grüße,
Tim-
Hi,
Bei Spalten wird es aufwendiger; da muß man jede Tabellenzelle einzeln einer Klasse zuordnen.
... also, ich glaube, mit Spalten ist es _einfacher_ :-))
<colgroup>
<col style="background-color:#63FF00;">
<col style="background-color:#FFBE00;">
</colgroup>
<tr>
<td>1 </td>
<td>2 </td>
</tr>
<tr>
<td>3 </td>
<td>4 </td>
</tr>
... beliebig viele ZeilenGruß
Axel
-
-
Hallo, Cee-Jay,
Wie lässt es sich realisieren, dass automatisch eine zeile einer Tabelle eine andere Farbe als die nächste hat?
Muss man da tatsächlich jede zeile einzeln "färben" oder gibt's dafür einen befehl/script?am besten bestimmst Du die Zeilenfarbe serverseitig, z.B. mit PHP/mySQL durch Ausgabe des entsprechenden HTML-Codes. Die zweitbeste Möglichkeit ist die - mitunter mühevolle - manuelle Festlegung.
Wenn auch das das unpraktikabel ist, kannst Du ja versuchen, das untenstehende Skript anzupassen und zu optimieren.
Entgegen meinem Skriptverständnis muß dabei z.Zt. leider jede Zeile mit derselben ID bezeichnet werden, was allerdings keinen validen Code ergibt. Es funktioniert aber trotzdem zumindest im Internet-Explorer.
Vielleicht findest Du ja - vielleicht mit Hilfe anderer Forumsteilnehmer - den Fehler ...
Grüße,
Sebastian
-----------------------------------------------------------------
<html>
<head>
</head>
<body>
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr name="table_row" id="table_row">
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr><tr name="table_row" id="table_row">
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr><tr name="table_row" id="table_row">
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr><tr name="table_row" id="table_row">
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr><tr name="table_row" id="table_row">
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
</tr><tr name="table_row" id="table_row">
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
</tr></table>
<SCRIPT>
var z = 1;function zebra(row_name)
{
var objConstrFields = document.getElementsByName(row_name);
for(i=0;i<objConstrFields.length;i++)
{
z = z*(-1);
if(z==1){objConstrFields[i].style.background='#EFEFEF';}else{objConstrFields[i].style.background='#FFFFFF';}
}
}if(document.getElementsByName)zebra("table_row");
</script>
</body>
</html>-
Hallo,
Entgegen meinem Skriptverständnis muß dabei z.Zt. leider jede Zeile mit derselben ID bezeichnet werden, was allerdings keinen validen Code ergibt. Es funktioniert aber trotzdem zumindest im Internet-Explorer.
Versuche es mal so (bezieht sich auf die erste Tabelle im Dokument):
function TableColor(nr)
{
if(document.getElementsByTagName)
{
var tabelle,reihen,i;
tabelle=document.getElementsByTagName("table")[nr];
reihen=tabelle.getElementsByTagName("tr");
for(i=0;i<reihen.length;i++)
{
if(i % 2 == 0)reihen[i].style.backgroundColor="#FFC";
else reihen[i].style.backgroundColor="#CCC";
}
}
}und
<body onload="TableColor(0)">
MfG, Thomas
-
Hallo, Thomas,
Versuche es mal so (bezieht sich auf die erste Tabelle im Dokument):
function TableColor(nr)
{
if(document.getElementsByTagName)
{
var tabelle,reihen,i;
tabelle=document.getElementsByTagName("table")[nr];
reihen=tabelle.getElementsByTagName("tr");
for(i=0;i<reihen.length;i++)
{
if(i % 2 == 0)reihen[i].style.backgroundColor="#FFC";
else reihen[i].style.backgroundColor="#CCC";
}
}
}und
<body onload="TableColor(0)">
genial, das funktioniert, Danke !!!
Den Code werde ich noch erweitern, so daß man z.B. die Tabellen mit Namen ansprechen und die Zeilenhintergrundfarbe im StyleSheet definiert werden kann.
Den "onLoad"-Funktionsaufruf müßte man ja eigentlich (zur schnelleren Anzeige und zur Vermeidung von Kollisionen mit body.onLoad-Aufrufen) auch in die jeweilige Tabelle setzen können. Funktioniert aber bei mir nicht :-( , weißt Du warum?
Grüße,
Sebastian
-
Hallo,
Den Code werde ich noch erweitern, so daß man z.B. die Tabellen mit Namen ansprechen und die Zeilenhintergrundfarbe im StyleSheet definiert werden kann.
Besser mit IDs ansprechen, weil das Element table kein Attribut name hat, also:
document.getElementById("eineID").getElementsByTagName("tr").style...
Den "onLoad"-Funktionsaufruf müßte man ja eigentlich (zur schnelleren Anzeige und zur Vermeidung von Kollisionen mit body.onLoad-Aufrufen) auch in die jeweilige Tabelle setzen können. Funktioniert aber bei mir nicht :-( , weißt Du warum?
Vermutlich ist der DOM-Baum zu diesem Zeitpunkt noch nicht komplett.
window.onload waere eine Alternative, aber ich sehe da keine Kollisionen, weil man ja einem Event-Handler auch mehrere Funktionen mit ; getrennt uebergeben kann.
MfG, Thomas
-
document.getElementById("eineID").getElementsByTagName("tr").style...
Hoppla, da fehlte etwas:
document.getElementById("eineID").getElementsByTagName("tr")[index].style...
MfG, Thomas
-
-
-
-
hi
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr name="table_row" id="table_row">
tr hat kein Name-Attribut
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr><tr name="table_row" id="table_row">
id-Attribute müssen eindeutige Werte haben.
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr></table>
name-Attribut weglassen.
id-Attribute mit angehängter aufsteigender Nummer verwenden
(id_row1, id_row2 usw.)
und dann per document.getElementById("id_row" + z); ansprechen.Oder noch besser, da beim Einfügen/Löschen von Zeilen keine ids geändert werden müssen:
der Tabelle eine id verpassen.
per mytable = document.getElementById die Tabelle holen.
und dann per myrows = mytable.getElementsByTagName("tr"); das Array der Zeilen holen.
Dann per Schleife über dieses Array laufen.<SCRIPT>
var z = 1;function zebra(row_name)
{
var objConstrFields = document.getElementsByName(row_name);
for(i=0;i<objConstrFields.length;i++)
{
z = z*(-1);
if(z==1){objConstrFields[i].style.background='#EFEFEF';}else{objConstrFields[i].style.background='#FFFFFF';}
}
}if(document.getElementsByName)zebra("table_row");
</script>
Robert
-
-
Hi,
Wie lässt es sich realisieren, dass automatisch eine zeile einer Tabelle eine andere Farbe als die nächste hat?
Muss man da tatsächlich jede zeile einzeln "färben" oder gibt's dafür einen befehl/script?das wird mit CSS3-Selektoren möglich, nur wird es derzeit noch von keinem mir bekannten Browser unterstützt:
tr:nth-child(odd) { background-color:#fff; }
tr:nth-child(even) { background-color:#aaa; }Merken ;)
</archiv/2002/10/25578/>
LG Orlando