nicht angemeldet
Zellenfarbe ändern
0 0 0 0 
Gunnar Bittersmann
Zellenfarbe ändern
Der MartinHallo alle zusammen,
ich muss eine Tabelle in einer HTML – Datei präsentieren.
Da die Tabelle ein wenig lang ist, ist es zu schwierig sie zu lesen. Habe gedacht die Zellen farblich zu unterscheiden (gerade Zellen – weiße Hintergrund, ungerade – leicht grau).
Mir ist klar, dass man in jede <td> style= background-color:#xxxxxx schreiben kann. Ich wollte das irgendwie automatisieren. Habe versucht folgendes zu schreiben, scheiterte doch in einer Stelle.
<html>
<head>
<script language="JavaScript">
<!--
int iColor = 0;
for(i=0; i<table ???; i++)
{
iColor++;
//-->
</script>
<body>
<table if ( iColor%2==1) {out.write("style='background-color:#E6E6E6;'")>
<tr>
<td> 1 </td>
</tr>
.
.
<tr>
<td> n </td>
</tr>
</table>
</body>
</head>
</html>
So ungefähr stelle ich mir das vor. Was soll man an der Stelle table ??? stellen? Oder liege ich komplett falsch?
Vielen Dank im Voraus
sl
-
So ungefähr stelle ich mir das vor. Was soll man an der Stelle table ??? stellen? Oder liege ich komplett falsch?
zwei denkfehler:
du willst die zeilen abwechselnd farblich gestalten - dann solletst du die <tr /> elemente entsprechend gestaltenwie du eingangs schon erwähnt hast, du willst gerade und ungerade zeilen unterscheiden, dann mach das auch
<tr class="odd" />
<tr class="even" />wenn der zähler modulo 2 als ergebnis 1 hat, dann ist es eine ungerade, wenn modulo 0 dann eine gerade
im css kannst du die tabellenzellen dann mit
.odd td
bzw
.even tdansprechen, damit sparst du eine menge code und hast es bei späteren änderungen leichter
-
Mir ist klar, dass man in jede <td> style= background-color:#xxxxxx schreiben kann. Ich wollte das irgendwie automatisieren.
Den Modulo-Operator haste ja schon gefunden.
Habe versucht folgendes zu schreiben, scheiterte doch in einer Stelle.
<script language="JavaScript">
<!--Doppelpfui. Erstens fehlt in script ein type="text/javascript" und zwotens muß man da nichts auskommentieren.
int iColor = 0;
int = var?
for(i=0; i<table ???; i++)
http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#table table_ref.rows.count
iColor++;
Hm? Eher sowas
table_ref.rows[i].style.backgroundColor = (i%2 == 0 ? 'white' : 'gray');
(Oder so, teste selber)
-
table_ref.rows[i].style.backgroundColor = (i%2 == 0 ? 'white' : 'gray');
jetzt schreibst du 100x "ich soll die klassen even und odd für abwechselnde zeilenfarben verwenden und blos keine styles fix reinschreiben oder dämliche klassennamen verwenden"
-
jetzt schreibst du 100x "ich soll die klassen even und odd für abwechselnde zeilenfarben verwenden und blos keine styles fix reinschreiben oder dämliche klassennamen verwenden"
1. Weigere ich mich, etwas mit so vielen Fehlern so oft zu schreiben
2. Erklär mir mal im vorliegenden Fall die Vorteile von wechselnden Klassennamen im Vergleich zu wechselnden Inline-styles (Wartbarkeit ist hier ein Scheinargument)-
- Weigere ich mich, etwas mit so vielen Fehlern so oft zu schreiben
gutes argument, ich ziehe 50 wiederholungen ab - aus deinem "so oft" lese ich herraus, dass du durchaus bereit bist, das ganze weniger oft zu schreiben - ich lass ja mit mir reden )
- Erklär mir mal im vorliegenden Fall die Vorteile von wechselnden Klassennamen im Vergleich zu wechselnden Inline-styles (Wartbarkeit ist hier ein Scheinargument)
schlechtes argument - nur weil es in diesem fall keine konkreten vorteile bzw keine konkreten nachteile gibt, ist es kein grund es nicht zu tun - beim nächsten mal, wenn mans ordentlich manchen sollte, läuft man sonst gefahr, auf die schon damalig zweifelhafte lösung zurückzugreifen
natürlich ist es egal, ob ich inline styles direkt schreibe oder nicht - aber auf 20 unterseiten jedes javascript anpassen, weil ich die farben ändern will oder doch lieber in einem 2-zeilen-css 2 werte austauschen?
-
-
-
@@Jaroslav Jablonski:
Den Modulo-Operator haste ja schon gefunden.
Der ist aber gar nicht notwendig. Anstatt in jedem Schleifendurchlauf zu dividieren, kann man auch einfach ein Flag umschalten:
window.onload = function () { var myTable = document.getElementById("myTable"); for (var i = 0, isEven = true; i < myTable.rows.length; i++, isEven = !isEven) myTable.rows[i].className = (isEven ? "even" : "odd"); };http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#table table_ref.rows.count
count??
Live long and prosper,
Gunnar--
Flughafen in Tempelhof
findet jeder Hempel doof.-
Hallo Gunnar,
Den Modulo-Operator haste ja schon gefunden.
Der ist aber gar nicht notwendig. Anstatt in jedem Schleifendurchlauf zu dividieren, kann man auch einfach ein Flag umschalten:warum so umständlich? für eine Odd/Even-Unterscheidung reicht doch eine simple Bit-Abfrage:
for (var i=0; i<myTable.rows.length; i++)
myTable.rows[i].className = (i&1 ? "odd" : "even");
So long, Martin -- Alleine sind wir stark ... gemeinsam sind wir unausstehlich!
-
-
-
@ suit,
Danke für denn Tipp, werde mir für die Zukunft merken.
Für diese Aufgabe ist doch bisschen ungeeignet.
Erstens: wünschenswert keine weitere Dateien (kein css)
Zweitens: bei fast 300 Einträgen manuell in jedem tr class schreiben …..@ Jaroslav Jablonski
Danke, ist schon nähe was ich gesucht habe. Werde gleich ausprobieren-
Erstens: wünschenswert keine weitere Dateien (kein css)
ein kurzes css mit ein paar zeilen in einem <style />-Element tuts ja auch, spart eine menge code
Zweitens: bei fast 300 Einträgen manuell in jedem tr class schreiben …..
du kannst ja die klassen mit javascript schreiben so wie du es jetzt auch tust - ob du in jede zelle einer zeilene etwas hineinschreibst oder in jede zeile selbst ist ein unterschied
manuell musst dus ja nicht machen, tut eh deine schleife
besonders langsame rechner profitieren davon, da nicht so viel neuer quelltext erzeugt wird
-
-
@@sl:
ich muss eine Tabelle in einer HTML – Datei präsentieren.
BTW: HTML-Datei. Bei Bindestrichen steht kein Leerzeichen (im Gegensatz zu Gedankenstrichen).
Die Vergabe von Klassennamen "even" und "odd" ist mit JavaScript möglich, hat aber Nachteile:
(1) Das Script läuft erst nach dem vollständigen Laden des Dokuments. Die Tabele wird also erstmal ohne Unterscheidung gerader/ungerader Zeilen angezeigt, später wird neu gerendert.
(2) JavaScript läuft nicht bei allen Nutzern.Besser ist, die Klassennamen serverseitig in den Quelltext schreiben zu lassen, bspw. mit PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>TEST</title> <style type="text/css"> [code lang=css].even {background: #FCC} .odd {background: #CCF}</style>
</head>
<body>
<table id="myTable">
<tbody><?php$isEven = true;?><tr class="<?php
echo ($isEven ? 'even' : 'odd'); $isEven = !$isEven;?>"><td>foo</td></tr>
<tr class="<?phpecho ($isEven ? 'even' : 'odd'); $isEven = !$isEven;?>"><td>bar</td></tr>
<tr class="<?phpecho ($isEven ? 'even' : 'odd'); $isEven = !$isEven;?>"><td>baz</td></tr>
<tr class="<?phpecho ($isEven ? 'even' : 'odd'); $isEven = !$isEven;?>"><td>quz</td></tr>
</tbody>
</table>
</body>
</html>[/code]Live long and prosper,
Gunnar--
Flughafen in Tempelhof
findet jeder Hempel doof.