Hintergrundfarbe in Tabellen ändern

Hallo,

als absoluter Anfänger habe ich folgendes Problem :

ich habe eine Tabelle erzeugt, die aus mehreren Zeilen und Spalten besteht.
Jetzt möchte ich, dass eine ganze Zeile der Tabelle beim mouseover die Hintergrundfarbe ändert und beim mouseout wieder die alte Farbe erscheint.
Gleichzeitig wir das ganze mit einem link versehen.
Das mit dem link hab ich ja hinbekommen, aber bei den Farben klappt es nicht so.

Wie geht dass ? wie muss das js aussehen ?
Geht das auch in css und wenn ja wie?

Danke im voraus

Bob

Gleichzeitig wir das ganze mit einem link versehen.
Das mit dem link hab ich ja hinbekommen, aber bei den Farben
klappt es nicht so.

Wo liegt der Fehler? Wie hast du es gemacht (Quellcode)?

Wie geht dass ? wie muss das js aussehen ?
Geht das auch in css und wenn ja wie?

Es geht theoretisch auch mit CSS alleine, indem du :hover verwendest. Aber der IE kennt das leider nur bei Links, sodass nur ander Browser die Farbänderung durchführen würden.

Mit JavaScript kannst du es mit dem style-Objekt lösen. In das Tag der entsprechenden Zelle kommt ein onmouseover rein. Dann kannst du entweder eine Funktion aufrufen, die die Farbe ändert (und der du mit ‚this‘ am besten das aktuelle Element übergibst, siehe Beispiel unten) oder du änderst die Farbe direkt im onmouseover-Attribut.
Genauso verfähsrt du dann mit dem onmouseout, wo du die Farbe wieder zurückänderst.

Insgesamt muss das dann folgendermaßen aussenen, ich verwende im Beispiel mal die Farben Rot und Grün:

Die Funktion im JS-Teil der Seite:

function change (wo,was){
wo.style.backgroundColor=was;
}

Der Aufruf im td-Element:

Ich habs nicht ausprobiert, aber so sollte es funktionieren.

Danke für die Antwort.

Ja ich schätze das funktioniert so, aber so wird ja nur eine Zelle eingefärbt.
Ich hätte das ganze gerne so, dass sich die ganze ZEILE farblich ändert. Also im .
Wie stelle ich das an, denn da funktioniert das so nicht.

Mit hover + link hab ich es versucht. Aber auch da macht er nur einzelne Zellen und nicht die Zeile.
Habe dann folgendes probiert :

Dabei macht er zwar den Farbwechsel und den Link, ab…

Ja ich schätze das funktioniert so, aber so wird ja nur eine
Zelle eingefärbt.
Ich hätte das ganze gerne so, dass sich die ganze ZEILE
farblich ändert. Also im .
Wie stelle ich das an, denn da funktioniert das so nicht.

Ah, tut mir Leid, da hab ich mich wohl verlesen.

Habe dann folgendes probiert :

wieso das so ist weiss ich nicht.

Weil’s ungültig ist, du darfst zwischen die einzelnen Zeilen und Zellen in der Tabelle keinen weiteren Code packen, nur in die Zellen rein.

Das ist natürlich etwas schwieriger. Ich bin gerade ziemlich müde, deswegen spare ich mir mal ein Beispiel und erkläre nur mal eine Lösungsidee, die mir gerade so kommt. Die ist allerdings nicht für Tabellen mit vielen Zeilen geeignet, vielleicht fällt mir morgen noch was besseres ein.
Mach mit CSS zwei Klassen, eine normale und eine eingefärbte. Färb die innerhalb des mit der Klasse ausgestatteten Elements enthaltenen Zellen ein (mit .klassenname td {…} ). Den Zeilen gibts du eine ID. Dann musst du bei einem onmouseover die ID der Zeile drumherum übergeben und kannst mit document.GetElementById(id).className=""; die Klasse der Zeile ändern. Dadurch werden alle Zellen in der Zeile mit der Zelle mit dem Mauspfeil drüber gefärbt.

Die ist
allerdings nicht für Tabellen mit vielen Zeilen geeignet,
vielleicht fällt mir morgen noch was besseres ein.

Tja das wäre das nächste Problem, denn es handelt sich um eine dynamische Tabelle bei der evtl auch schon mal 1000 Zeilen oder mehr zusammen kommen.
Ich hoffe dir fällt noch was ein.
Trotzdem danke .

Bob

Die ist
allerdings nicht für Tabellen mit vielen Zeilen geeignet,
vielleicht fällt mir morgen noch was besseres ein.

Tja das wäre das nächste Problem, denn es handelt sich um eine
dynamische Tabelle bei der evtl auch schon mal 1000 Zeilen
oder mehr zusammen kommen.
Ich hoffe dir fällt noch was ein.
Trotzdem danke .

Mir ist da in der Tat eventuell noch was eingefallen, allerdings habe ich das selbst noch nie benutzt, daher musst du selbst nachlesen :smile:
Ich denke da an „parentNode“, damit kann man in HTML das Elternelement rausfinden. In deinem Fall ist das bei jeder Zelle in einer Zeile die entsprechende Zeile. Dort kannst du dann eine CSS-Klasse zuweisen wie schon beschrieben, ganz ohne mit IDs oder Namen gearbeitet zu haben. Guck am besten mal im SelfHTML (http://de.selfhtml.org/javascript/objekte/node.htm#p…).

…danke das du dir die Mühe gemacht hast.
Werde es mal testen.

Gruss

Bob