nicht angemeldet
Farbe für Tabellenhintergrund abwechseln
Gunnar BittersmannHallo,
ich möchte zur Übersicht in meiner Datentabelle die Zeilen abwechselnd Weiss und Hellgrau färben.
Also Zeile1 komplett weiss, Zeile2 komplett grau, Zeile3 wieder weiss usw..
Wie kann ich das mit einfachen Mitteln bewerkstelligen?
Danke!
-
Moin!
Wie kann ich das mit einfachen Mitteln bewerkstelligen?
Entweder beim Erstellen der Tabellen den Hintergrund der Rows selbst zuweisen (über style oder background) oder durch JavaScript erledigen lassen. Ich mache das z.B. hiermit:
var rowColors= 2; // Globale Festlegung wieviele unterschiedliche Zeikenfarben : : var table= content.getElementsByTagName( 'table' ); for (var i=table.length; i--; ) with (table[i]) { for (var j= tBodies.length; j--; ) { var tRows= tBodies[j].getElementsByTagName( 'tr' ); for (var k= tRows.length; k--; ) { tRows[k].className= "row" + (k % rowColors); } } }die Klassen row0 und row1 müssen hierfür entsprechend definiert sein.
-- Skeeve
-
Moin!
Wie kann ich das mit einfachen Mitteln bewerkstelligen?
Oki, danke für deine Hilfe.
Über Modulo wollte ich das zu Beginn auch lösen, da die Tabelle dynamisch aus einer Datenbank aufgebaut wird. Doch wollte ich wissen ob es auch einen simpleren Weg gibt.
Werde dann doch das gute alte Modulo zu rate ziehen ;)Entweder beim Erstellen der Tabellen den Hintergrund der Rows selbst zuweisen (über style oder background) oder durch JavaScript erledigen lassen. Ich mache das z.B. hiermit:
var rowColors= 2; // Globale Festlegung wieviele unterschiedliche Zeikenfarben
:
:
var table= content.getElementsByTagName( 'table' );
for (var i=table.length; i--; ) with (table[i]) {
for (var j= tBodies.length; j--; ) {
var tRows= tBodies[j].getElementsByTagName( 'tr' );
for (var k= tRows.length; k--; ) {
tRows[k].className= "row" + (k % rowColors);
}
}
}> > die Klassen row0 und row1 müssen hierfür entsprechend definiert sein. > > -- Skeeve-
Hi,
Doch wollte ich wissen ob es auch einen simpleren Weg gibt.
ja, die CSS/3.0-Pseudoklasse :nth-child(). Es mangelt lediglich an der Verbreitung.
Entweder beim [...]
-- SkeeveZitiere bitte nur das, worauf Du Dich beziehst, danke.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hallo,
wie sieht dann die Umsetzung im Groben aus?
Die Idee gefällt mir nämlich sehr gut. Leider ist mein CSS Wissen recht beschränkt.</head>
<style>tr:nth-child(odd) {color : navy;}
tr:nth-child(even){color : maroon;}</style>
<body><table>
<tr>
<td>
ROW1
</td>
</tr><tr>
<td>
ROW2
</td>
</tr>-
Hi,
wie sieht dann die Umsetzung im Groben aus?
bei Deinem Beispiel-Code fehlt lediglich das type-Attribut im <style>-Element, ansonsten kann ich daran kaum[1] etwas aussetzen.
Die Idee gefällt mir nämlich sehr gut. Leider ist mein CSS Wissen recht beschränkt.
Das ist meines auch. Hier übersteigt Dein CSS-Wissen allerdings die Fähigkeiten der Browser.
Cheatah
[1] Ich würde der Tabelle noch ein <tbody> verpassen, aber das ändert hier nichts.
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Ich möchte mit einer Funktion das Design einer Tabelle gestalten.
Leider passiert nix wenn ich den Code eingeben, nichtmal ein Fehler...<table border="1">
<script language="text/javascript">
var modulo = counter % 2;if(modulo == 0)
{document.write("<tr bgcolor='#CCCCCC' >");
}
else
{document.write("<tr bgcolor='#FFFFFF'>");
}
counter++;
</script>
<td>
ROW1
</td>
</tr>Jede 2te Zeile Soll Grau gefärbt werden. Doch wenn ich mir den Code nach dem Aufruf im Browser anschaue wurden die document.write Befehle nicht umgesetzt... wieso?
-
Hello out there!
Doch wenn ich mir den Code nach dem Aufruf im Browser anschaue wurden die document.write Befehle nicht umgesetzt... wieso?
Weil der Browser keinerlei Information darüber hat, dass der Inhalt des 'script'-Bereiches JavaScript ist:
<script language="text/javascript">
muss heißen: <script type="text/javascript">
var modulo = counter % 2;
Welchen Wert hat 'counter'?
alert("modulo");
Du möchtest die Zeichenkette "modulo" ausgeben?
counter++;
Soll das Ganze eventuell eine Schleife werden?
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe) -
Hi,
vom bereits Gesagten (und vom unsinnigen border-Attribut) abgesehen:
<table border="1">
<script language="text/javascript"><script> ist kein gültiges Kind von <table>.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
-
-
-
-