nicht angemeldet
Dynamisches "Fadenkreuz" für Tabellen
Ich würde für ein Web-Projekt mit großen Daten-Tabellen gerne einen Effekt wie in diesem Beispiel http://www.henkel.de/int\_henkel/geschaeftsb03/annualreport/tabellen/32.htm erzielen, allerdings scheint mir der Ansatz etwas schwermütig zu sein.
Die Linien könnte man - zumindest in meinem besonderen Fall, da das Cellspacing der Tabellen 0 ist - mit CSS erzeugen. Die horizontale Linie zu erzeugen ist kein Problem. Bei der vertikalen Linie suche ich nach einem überzeugenden Ansatz. (In NN4 muss es nicht funktionieren. Die Seiten sind auf XHTML 1.0 Transitional ausgelegt.)
Die Verwendung von Klassen kommt nicht in Betracht, da das class-Attribut schon zur Formatierung der Tabelle genutzt wird. Das id-Attribut böte sich an. Nachteil dabei, dass die Werte in jeder Zeile einen individuellen Prä- oder Suffix bekommen müssten. Wäre das gegeben, müsste man doch die entsprechenden Zeilen einer Spalte ansprechen können. In menschlicher Sprache würde das etwa so klingen: "Untersuche die id der Zelle über die ich gerade mit dem Mauszeiger bin , errechne aus dem Wert der dabei herauskommt die aktuelle Zeile und Spalte und befehle allen entsprechenden Zellen der Zeile einen roten Rand unten und allen entsprechenden Zellen der Spalte einen roten Rand rechts anzuzeigen!"
Kennt jemand ein Beispiel, kann einen Ansatz in Code liefern oder einschätzen, ob sich das in etwa umsetzen lassen würde ohne vor allzu viele Wände zu rennen?
-
Weiss nu nicht direkt ne Antwort auf dein Vorhaben aber ein HTML-Element kann mehr als eine Klasse zugewiesen bekommen
<td class="klasse1 klasse2">
Immer nur durch Leerzeichen trennen :)
-
Guggug,
ich täte da ungefähr so rangehen:Userlein ist mit Maus auf td:
- dieses Element in einer Variablen speichern
- parentNode ermitteln, das wäre die aktuelle tr (speichern als variable)
- gucken wieviele Spalten (also Kindknoten, in der tr sind) die Zeile hat und die erstmal mit bunter border-bottom versehen.
Gleich mit abprüfen, ob es sich bei einem Kindknoten um das aktuelle td handelt und den Index speichern, damit man weiss, in welcher Spalte man ist. - den Papaknoten von tr ermitteln (tbody) und gucken wieviele tr es in diesem body gibt.
- durch die trs durchschleifen, und jeweils bei dem kindknoten, der die nte td ist border-right setzen.
Gruß Uschi