hrastyy: Ganze Spalte per :hover verändern

Hallo^^

So trivial das auch klingen mag: Ich finde nirgendwo eine Anweisung, wie man den Browser dazu bringt, per :hover-Tag eine ganze Spalte zu formatieren.
Ich hab da was mit <col> gesehen. Bis zu dem Punkt, an dem sich was ändern soll, ist alles super. Aber der :hover-Tag scheint auf dieses Element nicht anwendbar zu sein...
Der Stylesheet-Code, mit dem ich es versucht habe:

  
.stundenplan col:hover {background-color:#FFCC00}  
  
.stundenplan tr:active {background-color:#FFCC00}  
.stundenplan tr:focus {background-color:#FFCC00}  
.stundenplan tr:hover {background-color:#FFCC00}  
  
.stundenplan tr td {color:#404040}  
.stundenplan tr td:active {background-color:#FFFF00; color:black}  
.stundenplan tr td:focus {background-color:#FFFF00; color:black}  
.stundenplan tr td:hover {background-color:#FFFF00; color:black}  
  
.stundenplan tr:hover td {color:black}  
.stundenplan tr:hover td:active {color:black}  
.stundenplan tr:hover td:focus {color:black}  
.stundenplan tr:hover td:hover {color:black}  

Die Klasse "Stundenplan" ist glaube ich selbsterklärend: Dieses Stylesheet soll für einen Stundenplan dienen, bei dem die Zelle bei :hover gelb erleuchtet und Spalte und Zeile orange sein sollen.

Aber das <col>-Element lässt sich nicht formatieren.

Hat jemand einen Hinweis auf meinen Fehler, oder vielleicht einen Änderungsvorschlag?
Geht es auch ohne <colgroup><col/></colgroup> ?

Danke im Voraus!

URL zu einer älteren Version der Site ist vermerkt.

  1. Sorry, hab vergessen anzugeben, dass ich eine TABELLE formatieren will *gg*

    1. Om nah hoo pez nyeetz, hrastyy!

      IMHO geht das mit reinem CSS nicht, weil sich die Spalten nicht hovern lassen, da die Zeilen drüber liegen. http://wiki.selfhtml.org/wiki/Doku:CSS/Eigenschaften/Tabellen#Hintergründe

      Matthias

      --
      1/z ist kein Blatt Papier.

      1. IMHO geht das mit reinem CSS nicht, weil sich die Spalten nicht hovern lassen, da die Zeilen drüber liegen. http://wiki.selfhtml.org/wiki/Doku:CSS/Eigenschaften/Tabellen#Hintergründe

        Matthias

        okay, das is logisch...
        Gibts andere Möglichkeiten, das hinzubekommen?
        zB mit JavaScript? Ich kann zwar selbst keines schreiben, aber ich verwende eines auf der Seite.

        1. Hallo,

          Gibts andere Möglichkeiten, das hinzubekommen?
          zB mit JavaScript? Ich kann zwar selbst keines schreiben, aber ich verwende eines auf der Seite.

          Ja, ich hab hier mal die Einzelschritte beschrieben:

          <!DOCTYPE html>  
          <html>  
          <head>  
          	<script type="text/javascript" charset="utf-8">  
          	  
          		[code lang=javascript]// Hier iniziiern wir das ganze, d.h. wir gehen jede einzelne zelle der Tabelle durch  
          		// und geben ihr bei onmouseover die funktion die ausgeführt werden muss wenn man  
          		// mit der Maus drüber geht und bei onmouseout die funktion die ausgeführt  
          		// werden soll wenn die Maus nicht mehr drüber ist.  
          		function initColHover() {  
          			var table = document.getElementById("t");  
          			for (var i=0; i < table.getElementsByTagName("td").length; i++) {  
          				table.getElementsByTagName("td")[i].onmouseover = colHover;  
          				table.getElementsByTagName("td")[i].onmouseout = colHoverOut;  
          			}  
          		}  
          		  
          		// Beim hovern kalkulieren wir erst mal in welcher Spalte das td ist über dem wir  
          		// mit der Maus drüber sind um dann auf allen tds in der Spalte die Klasse "hover"  
          		// zu setzen.  
          		function colHover(e) {  
          			var td = e.target;  
          			setClassOnTdIndex("hover", getIndex(td));  
          		}  
          		  
          		// Beim enthovern (oder wie man das nennen möchte wenn die Maus nicht mehr über dem  
          		// td ist), schauen wir auch wieder in welcher Spalte das td war und machen dann  
          		// bei allen tds in dieser spalte das class-Attribut leer und entziehen ihm dadurch  
          		// die Klasse "hover".  
          		function colHoverOut(e) {  
          			var td = e.target;  
          			setClassOnTdIndex("", getIndex(td));  
          		}  
          		  
          		// Um zu kalkulieren über welcher Spalte die Maus gerade ist gehen wir erst einmal  
          		// zum Elternelement (parentNode) des td, holen uns alle dessen tds und zählen in  
          		// einer Schleife hoch bis wir das td gefunden haben. Danach geben wir einfach  
          		// unsere zählvariable zurück, denn das ist auch gleichzeitig die Position der Spalte.  
          		function getIndex(td) {  
          			for (var i=0; i < td.parentNode.getElementsByTagName("td").length; i++) {  
          				if (td.parentNode.getElementsByTagName("td")[i] == td) {  
          					return i;  
          				}  
          			}  
          		}  
          		  
          		// Um bei allen tds in einer Spalte die klasse zu verändern holen wir uns erst einmal  
          		// alle trs der Tabelle, laufen sie in einer Schleife durch, holen uns bei jedem  
          		// Durchlauf alle tds des jeweiligen tr und setzen die klasse für das jeweilige  
          		// td an der index position die wir vorher kalkuliert haben.  
          		function setClassOnTdIndex(c, index) {  
          			var table = document.getElementById("t");  
          			var trs = table.getElementsByTagName("tr");  
          			for (var i=0; i < trs.length; i++) {  
          				trs[i].getElementsByTagName("td")[index].className = c;  
          			}  
          		}  
          		  
          		// Wenn die komplette Seite geladen ist dann rufen wir unsere Initialisierungsmethode  
          		// auf. (Allerdings gibt es wenn man mehrere Scripte benutzt auch bessere Alternativen  
          		// dazu, z.b. http://simonwillison.net/2004/may/26/addloadevent/ aber für den Anfang  
          		// reicht das erst einmal)  
          		window.onload = initColHover;
          
          </script>  
          <style type="text/css" media="screen">  
          	~~~css
          

          .hover { background: green; }
          table { border: 1px solid #aaa; border-width: 1px 1px 0 0; border-collapse: collapse; }
          td { width: 50px; text-align: center; border: 1px solid #aaa; border-width: 0 0 1px 1px; }

          	</style>  
          </head>  
          <body>  
          	<table id="t">  
          		<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>  
          		<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>  
          		<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>  
          		<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>  
          		<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>  
          		<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>  
          		<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>  
          	</table>  
          </body>  
          </html>[/code]  
            
             Jeena  
          ![](http://jeenaparadies.net/pavatar.png)
          
          -- 
          [Jlog](http://jeenaparadies.net/webdesign/jlog/) | [Gourmetica Mentiri](http://jeenaparadies.net/gourmetica-mentiri/)
          
          1. Om nah hoo pez nyeetz, Jeena Paradies!

            Macht ein fachlich hilfreich.

            Ergänzung: funktioniert nicht wie gewünscht, wenn Zellen verbunden werden.

            Matthias

            --
            1/z ist kein Blatt Papier.

            1. Hallo,

              Ergänzung: funktioniert nicht wie gewünscht, wenn Zellen verbunden werden.

              Jo stimmt schon aber das können wir dann verfeinern wenn es wirklich nötig ist. Ich bin aus dem Text erst mal davon ausgegangen dass das nicht der Fall ist.

              Jeena

              1. Om nah hoo pez nyeetz, Jeena Paradies!

                Ich bin aus dem Text erst mal davon ausgegangen dass das nicht der Fall ist.

                Ich ebenso.

                Matthias

                --
                1/z ist kein Blatt Papier.

          2. @@Jeena Paradies:

            nuqneH

            3× hilfreich ist nun aber ein bisschen viel des Guten.

            Das Script berücksichtigt nicht, dass es außer 'td' noch andere Tabellenzellen gibt.

            (Und wenn es die im speziellen Fall nicht gibt, ist vermutlich das Mark-up falsch.)

            Qapla'

            --
            Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
            (Mark Twain)
            1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

              3× hilfreich ist nun aber ein bisschen viel des Guten.

              Das Script berücksichtigt nicht, dass es außer 'td' noch andere Tabellenzellen gibt.

              Wir sind hier bei selfhtml. Das Prinzip ist klar und ausführlich erläutert worden, ein wenig Arbeit soll der OP auch noch leisten. Schade wäre nur, wenn seine Tätigkeit darauf hinausliefe, die th zu td's zu machen und diese lediglich anders zu formatieren.

              Matthias

              --
              1/z ist kein Blatt Papier.

            2. Hallo,

              Das Script berücksichtigt nicht, dass es außer 'td' noch andere Tabellenzellen gibt.

              Ich denke ein einfaches kommentiertes Script das nicht alle (obskuren) Sonderfälle berücksichtigt aber um diese leicht erweitert werden kann fals nötig hilft dem Fragesteller der sagt er könne (noch) gar kein JavaScript mehr als kein Script.

              (Und wenn es die im speziellen Fall nicht gibt, ist vermutlich das Mark-up falsch.)

              Hm, die da wären? Ich habe mein Markup mal durch den Validator laufen lassen und der zeigt keine Fehler an (bis auf die Tatsache dass ich im head <title> vergessen habe und fälschlicherweise das charset des js mit angegeben habe).

              Jeena

              1. Das Script berücksichtigt nicht, dass es außer 'td' noch andere Tabellenzellen gibt.
                Ich denke ein einfaches kommentiertes Script das nicht alle (obskuren) Sonderfälle berücksichtigt aber um diese leicht erweitert werden kann fals nötig hilft dem Fragesteller der sagt er könne (noch) gar kein JavaScript mehr als kein Script.

                Dass eine Tabelle auch Kopfzellen (in einem Tabellenkopf) haben kann, ist jetzt kein obskurer Sonderfall :) Das ist standard, besonders wenn die Tabellen mit einem CMS z.B. aus CSV-Daten erzeugt werden.

                1. Hallo,

                  Dass eine Tabelle auch Kopfzellen (in einem Tabellenkopf) haben kann, ist jetzt kein obskurer Sonderfall :) Das ist standard, besonders wenn die Tabellen mit einem CMS z.B. aus CSV-Daten erzeugt werden.

                  Der op hat nicht geschrieben dass es diese überhaupt gibt und schon gar nicht dass sie auch die Farbe verändern sollen. Von einem CMS oder CSV-Daten war auch keine Rede.

                  Natürlich könnte ich mir alles mögliche einfallen lassen was irgendwann einmal vielleicht cool wäre drinn zu haben, aber ich bin ja in solchen Fällen eher für agile development wo man erst mal nur das macht was offensichtlich nötig ist, wenn der "Kunde" später dann mehr Funktionalität haben möchte legt man diese dann iterativ dazu. Somit wird vermieden dass man unnötig Arbeit verrichtet und die unnötige Funktionalität nie benutzt wird und nur Geld und/oder Zeit kostet.

                  Jeena

                  1. @@Jeena Paradies:

                    nuqneH

                    Natürlich könnte ich mir alles mögliche einfallen lassen was irgendwann einmal vielleicht cool wäre drinn zu haben, aber ich bin ja in solchen Fällen eher für agile development wo man erst mal nur das macht was offensichtlich nötig ist, wenn der "Kunde" später dann mehr Funktionalität haben möchte legt man diese dann iterativ dazu. Somit wird vermieden dass man unnötig Arbeit verrichtet und die unnötige Funktionalität nie benutzt wird und nur Geld und/oder Zeit kostet.

                    Da läuft man Gefahr, dass es am Ende viel mehr Geld und/oder Zeit kostet.

                    Gleich dran gedacht, dass es neben 'td' auch 'th' gibt, kostet eine Minute: eine halbe Minute nachdenken und eine halbe Minute den Code gleich so schreiben, dass beides abgedeckt ist.

                    Die Funktionalität später nachzurüsten ist deutlich teurer: Code raussuchen, Code lesen und wieder verstehen, Code ergänzen.

                    Es ist immer ein zweischneidiges Schwert, Code nur für den gerade aktuellen Anwendungsfall zu schreiben ohne auch nur wenigstens ein bisschen in die Zukunft zu schauen. Das Aufwand-Nutzen-Verhältnis kann ganz unterschiedlich ausfallen. Hier ist IMHO die etwas allgemeinere Lösung klar im Vorteil.

                    Qapla'

                    --
                    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                    (Mark Twain)
                    1. Hallo,

                      Es ist immer ein zweischneidiges Schwert, Code nur für den gerade aktuellen Anwendungsfall zu schreiben ohne auch nur wenigstens ein bisschen in die Zukunft zu schauen. Das Aufwand-Nutzen-Verhältnis kann ganz unterschiedlich ausfallen. Hier ist IMHO die etwas allgemeinere Lösung klar im Vorteil.

                      Ich bin da wohl ein gebranntes Kind. Wir hatten einen auf der Arbeit der immer versucht hat zu erraten was die Kunden in Zukunft vielleicht haben wollen werden und sich damit ewig aufgehalten hat das alles zu implementieren. Leider konnte er nicht wirklich gut programmieren und jetzt sieht der code aus wie Drecksau und hat in der ganzen Funktionalität die kein einziger kunde nutzt oder auch nur weiß dass sie existiert so viele unnötigen bugs dass wir anderen immer stundenlang forschen müssen um zu verstehen wozu er dies oder das oder jenes eingebaut hat. Wir mussten ihn übrigens entlassen weil er einfach das dreifache an Zeit gebraucht hat verglichen mit anderen und auch nie eingesehen hat dass wir die Entwicklung der von Kunden nicht bestellten Funktionalität nie bezahlt bekommen werden.

                      Deshalb reagiere ich so allärgisch darauf wenn mir einer was davon erzählt dass man schon mal an alle möglichen zukünftigen Sachen Denken soll.

                      Ich würde ja sogar vielleicht mit einstimmen dass dies ein Fall wäre wo man die th auch mit reinnehmen sollte wenn ich davon ausgehen würde dass sich die Hintergrundfarbe eines Headers in der Spalte beim hovern auch verändern sollte. Dieser Meinung bin ich aber nicht und deshalb finde ich es sinnvoll es erst mal der Einfachheit halber rauszulassen bis der meiner Meinung nach eher unwarscheinliche Fall eintritt dass der Frager das konkret nachfragt. Das hat zwei Vorteile: 1. es ging schneller zu entwickeln und 2. die für jemanden der kein JS kann sowieso schwierige Materie ist einfacher zu verstehen

                      Jeena

                      1. @@Jeena Paradies:

                        nuqneH

                        Ich würde ja sogar vielleicht mit einstimmen dass dies ein Fall wäre wo man die th auch mit reinnehmen sollte wenn ich davon ausgehen würde dass sich die Hintergrundfarbe eines Headers in der Spalte beim hovern auch verändern sollte.

                        Man muss sie mit reinnehmen, auch wenn man 'th' nicht umfärben will, weil das Script sonst gar nicht funktioniert.

                        Das hat zwei Vorteile: 1. es ging schneller zu entwickeln

                        Das hat einen Nachteil: Es geht von fehlerhaftem Mark-up aus.

                        Qapla'

                        --
                        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                        (Mark Twain)
                        1. @@Gunnar Bittersmann:

                          nuqneH

                          Das hat einen Nachteil: Es geht von fehlerhaftem Mark-up aus.

                          PS: Es könnte sich ein Entwickler ranmachen, das Mark-up zu korrigieren und Kopfzellen mit 'th' auszuzeichnen.

                          Ein Script sollte so robust sein, dass es dann immer noch funktioniert.

                          Und das gilt allgemein, nicht nur in diesem speziellen Fall.

                          Qapla'

                          --
                          Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                          (Mark Twain)
                          1. Hallo,

                            PS: Es könnte sich ein Entwickler ranmachen, das Mark-up zu korrigieren und Kopfzellen mit 'th' auszuzeichnen.
                            Ein Script sollte so robust sein, dass es dann immer noch funktioniert.

                            Ja.

                            Und das gilt allgemein, nicht nur in diesem speziellen Fall.

                            Wie du schon schreibst ist das ein zweischneidiges Schwert wie weit man mit dieser Allgemeinheit zu gehen bereit ist. Das script funktioniert nicht für alle möglichen Tabellenkonstruktionen, dazu war es auch nie gedacht. Mir fallen da auf Anhieb so sachen wie dass der footer auch mit einbezogen wird obwohl er das vielleicht gar nicht sollte, sachen wie rowspan oder colspan lassen alles explodieren, usw. usf.

                            Dennoch war das Ziel wie ich jetzt schon zum zweiten mal wiederhole nicht ein produktionsfertiges und optimiertes Script abzuliefern sondern dem JavaScript-Anfänger anhand eines Beispieles aufzuzeigen wie man ein Script das das macht was er möchte grundsätzlich aufbaut. Sachen wie rowspan, tfoot, th usw. können eingebaut werden falls sie benötigt werden, sollten aber nicht von Anfang an drin sein da sie einen Anfänger viel mehr verwirren als dass sie ihm Helfen das Script zu verstehen.

                            Jeena

                            1. Dennoch war das Ziel wie ich jetzt schon zum zweiten mal wiederhole nicht ein produktionsfertiges und optimiertes Script abzuliefern sondern dem JavaScript-Anfänger anhand eines Beispieles aufzuzeigen wie man ein Script das das macht was er möchte grundsätzlich aufbaut. Sachen wie rowspan, tfoot, th usw. können eingebaut werden falls sie benötigt werden, sollten aber nicht von Anfang an drin sein da sie einen Anfänger viel mehr verwirren als dass sie ihm Helfen das Script zu verstehen.

                              Jeena

                              Danke, Jeena!

                              Ich hab den Beitrag leider erst jetzt angeschaut, aber das JavaScript sieht schon mal gut aus. Danke für deine ausführlichen Kommentare!
                              Ich muss es aber erst überarbeiten damit alles funktioniert, und das werde ich vorerst ruhen lassen, weil ich die Seite nächste Woche Mittwoch bereits präsentieren soll, und diese Experimente lieber weglasse, bevor noch was schief läuft.
                              Aber VIELEN DANK ;D

                              Und: Es stimmt, der Footer wird miteinbezogen, und der <th>-Tag sprengt alles.

                        2. Hallo,

                          Man muss sie mit reinnehmen, auch wenn man 'th' nicht umfärben will, weil das Script sonst gar nicht funktioniert.

                          Ah das ist natürlich ein Bug, stimmt. Das hätte man vorher abfragen müssen ob es das überhaupt gibt, bevor man drauf zugreift.

                          var td = trs[i].getElementsByTagName("td")[index];  
                          if (td) td.className = c;
                          

                          Das sollte abhilfe schaffen in der Funktion setClassOnTdIndex()

                          Das hat einen Nachteil: Es geht von fehlerhaftem Mark-up aus.

                          Naja das stimmt so nicht ganz, das Markup ist ja immer noch nicht Fehlerhaft.

                          Jeena

                      2. Wir hatten einen auf der Arbeit der immer versucht hat zu erraten was die Kunden in Zukunft vielleicht haben wollen werden und sich damit ewig aufgehalten hat das alles zu implementieren.

                        Man kann es übertreiben :)

                        Deshalb reagiere ich so allärgisch darauf wenn mir einer was davon erzählt dass man schon mal an alle möglichen zukünftigen Sachen Denken soll.

                        Ein guter Schnitt dazwischen ist wirtschaftlich für beide Interessant - ein Programmierer der nur Sackgasse programmiert und man im Falle einer Erweiterung quasi gezwungen ist, den kompletten Code wegzuschmeissen ist auch nicht das Wahre.

                        Ich stehe oft vor dem Problem, dass der Kunde eine TYPO3-Extension braucht, die jetzt genau für eine Sprache (Deutsch) benötigt wird - die Lokalisierung einzubauen und vorzubereiten kostet Zeit, wesentlich mehr Zeit als hardcodiert einfach ein paar Texte reinzuklopfen. Viele der für einen Kunden entwickelten Extensions benötigen früher oder später etwas ergänzt auch andere Kunden, die dann möglicherweise 2 oder mehr Sprachen nutzen wollen. Wenn man da dann erst beginnen muss, sämtliche Textstückerl rauszusuchen, zu benennen und dann noch in die entsprechenden Lokalisierungsfiles aufzuteile verbrät man wesentlich mehr Zeit als es gleich zu machen - und das gehört zu einem guten Programmierer dazu: zu wissen, was nicht nur jetzt grade gebraucht wird sondern was zukunftig bei anderen Projekten gebraucht wird oder werden kann und sinnvollerweise implementiert gehört.

                        Darum redet man miteinander: wenn ich weiß, dass mein Kollege für ein Projekt in 3 Monaten etwa das braucht, was ich jetzt mache, dann wird beratschlagt und gleich für die Erweiterung vorbereitet oder ggf. sofort (auf gut Glück) umgesetzt. Nur eben ohne Hirn und Verstand irgendwas dazubauen oder vorsehen zahlt sich nicht aus.

                        Das hat zwei Vorteile: 1. es ging schneller zu entwickeln und 2. die für jemanden der kein JS kann sowieso schwierige Materie ist einfacher zu verstehen

                        Grade in diesem, so trivialen Fall ist es nicht nachzuvollziehen: wer so einfachen Code nicht versteht, sollte auch bei späteren Erweiterungen die Finger davon lassen. Und "schneller zu entwickeln" zählt hier auch nicht, da die Erweiterung auf andere Elementtypen hier keine Kosten im 4-stelligen bereich verursacht die keiner zahlt - und wenn sowas da ist, dann wird das auch verkauft oder dazuverschenkt um den Kunden glücklich zu machen.

                        1. Hallo,

                          Grade in diesem, so trivialen Fall ist es nicht nachzuvollziehen: wer so einfachen Code nicht versteht, sollte auch bei späteren Erweiterungen die Finger davon lassen.

                          Hier kann ich nun wirklich nicht zustimmen. Kam der poster nicht extra hier ins SELFHTML-Forum um etwas zu lernen? Ich weiß nicht ganz was hier eigentlich von mir erwartet wurde, etwa dass ich den kompletten Quellcode produktionsfertig abliefere? Das was, wie schon drei mal erwähnt nicht meine Intention, es sollte eine Starthilfe werden um aufzuzeigen wie man ein solches Script strukturiert und gestaltet. Deshalb auch die langen Kommentare zu jeder Funktion.

                          Ich selbst kann mich noch sehr gut daran erinnern dass mich zu komplizierte Scripte am Anfang viel zu sehr abgeschreckt haben so dass ich dann nicht mal versucht habe sie nachzuvollziehen. Der Gedanke war erst einmal das kleinstmögliche funktionierende Beispiel zu bringen, ohne header, footer, colspan, rowspan und anderen fällen. Wenn der lernende das verinnerlicht hat dann kann man ja im nächsten Schritt über Erweiterungen nachdenken.

                          Übrigens bringe ich meiner Tochter genau so Mathemtik bei und sie und der Lehrer sind sehr zufrieden. Wir machen das in kleinen Schritten und ich überfordere sie nicht sondern erkläre erst einmal die Grundlagen einer Rechnung dann lasse ich sie Rechnen und helfe dabei und erst wenn ich sehe dass sie das grundsätzliche verstanden hat, dann erhöhe ich das Niveau und erfinde schwierigere Aufgabenstellungen die dann auch mal zu (für sie) unerwarteten Ergebnissen führen. Somit gibt sie nicht gleich am Anfang auf und sagt dass sie das sowieso nie lernen wird sondern es macht Spaß in kleinen Schritten nach vorne zu gehen.

                          Und "schneller zu entwickeln" zählt hier auch nicht

                          Doch, denn bei th hört es ja nicht auf, die erste Anmerkung war ja dass das script bei colspan nicht funktioniert. Daran habe ich beim schnellen hinschreiben des Scripts auch selbst gedacht aber es für einen Anfängerkurs erst mal für zu kompliziert erachtet. Diese Zusätze gehören in die nächste iteration.

                          Viele scheinen übersehen zu haben was der OP geschrieben hat:

                          Gibts andere Möglichkeiten, das hinzubekommen?
                          zB mit JavaScript? Ich kann zwar selbst keines schreiben ...

                          Ich habe mich an das Niveau angepasst und versucht zu Helfen ohne von oben herab zu sagen: "Ach das ist zu kompliziert für dich das schaffst du sowieso nicht, gib auf!"

                          Jeena

              2. @@Jeena Paradies:

                nuqneH

                Ich denke ein einfaches kommentiertes Script das nicht alle (obskuren) Sonderfälle berücksichtigt

                Dass eine Tabelle Zeilen- und Spaltenköpfe hat, ist kein Sonderfall (schon gar kein obskurer), sondern die Regel.

                (Und wenn es die im speziellen Fall nicht gibt, ist vermutlich das Mark-up falsch.)
                Hm, die da wären? Ich habe mein Markup mal durch den Validator laufen lassen und der zeigt keine Fehler an

                Ich sagte auch falsch, nicht syntaktisch falsch.

                Zeilen- und Spaltenköpfe als 'td' auszuzeichnen ist falsch, denn dafür ist 'th' vorgesehen.

                (bis auf die Tatsache dass ich im head <title> vergessen habe und fälschlicherweise das charset des js mit angegeben habe).

                Das war mir auch aufgefallen; hatte ich glatt vergessen zu erwähnen. ;-)

                Qapla'

                --
                Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                (Mark Twain)
                1. Hallo,

                  Dass eine Tabelle Zeilen- und Spaltenköpfe hat, ist kein Sonderfall (schon gar kein obskurer), sondern die Regel.

                  Naja gut, aber das sagt dennoch nicht aus dass die Regel wäre dass sich die Hintergrundfarbe dieser auch ändern sollte.

                  Mir fallen natürlich auch noch 1000 sachen ein was man an dem Script verbessern könnte, z.b. nicht einfach die klassen überschreiben sondern ergänzen, die Zwischenergebnisse von getElementsByTagName() in Variablen speichern (wobei die VM das wohl eh wegoptimiert, keine Ahnung), das ganze in ein Modul verpacken und nicht den globalen Namensraum verschmutzen, etc. aber das alles würde meiner Meinung nach nur den Frager überfordern der sagt er könne (noch) kein JavaScript. Ich habe versucht nur mal grundsätzlich Hilfestellung zu geben und mal aufzuzeigen wie so ein Ablauf eines Scriptes grundsätzlich aussehen könnte. Es war nicht mein Ziel ein für die Produktion fertig optimiertes Script zu schreiben.

                  (Und wenn es die im speziellen Fall nicht gibt, ist vermutlich das Mark-up falsch.)
                  Hm, die da wären? Ich habe mein Markup mal durch den Validator laufen lassen und der zeigt keine Fehler an
                  Ich sagte auch falsch, nicht syntaktisch falsch.

                  Ich möchte dir mal anhand eines Venn-Diagrams zeigen wie das Wort "falsch" alle untergruppen von "falsch" mit einschließt.

                  Und ja das ist ein Scherz

                  Zeilen- und Spaltenköpfe als 'td' auszuzeichnen ist falsch, denn dafür ist 'th' vorgesehen.

                  Nur hat hier das in diesem Thread niemand so gemacht oder auch nur vorgeschlagen zu machen.

                  Jeena

            3. Das Script berücksichtigt nicht, dass es außer 'td' noch andere Tabellenzellen gibt.

              Dafür gibt es ja http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#tr@title=cells, was man anstelle von getElementsByTagName('td') verwenden kann.

              Mathias

              1. @@molily:

                nuqneH

                Das Script berücksichtigt nicht, dass es außer 'td' noch andere Tabellenzellen gibt.

                Dafür gibt es ja http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#tr@title=cells, was man anstelle von getElementsByTagName('td') verwenden kann.

                Ja!!1elf

                Damit ist der Aufwand, es gleich richtig zu machen, unter einer Minute. Er beschränkt sich auf das Nachdenken – zusätzlicher Code ist nicht erforderlich, nur geringfügig anderer.

                Qapla'

                --
                Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                (Mark Twain)
                1. Hallo,

                  Damit ist der Aufwand, es gleich richtig zu machen, unter einer Minute. Er beschränkt sich auf das Nachdenken – zusätzlicher Code ist nicht erforderlich, nur geringfügig anderer.

                  Nachdenken hilft da leider nicht wenn man diese cells-methode nicht kennt, wie ich (bis jetzt).

                  Jeena

          3. Lieber Jeena Paradies,

            [Beispiel]

            Gunnar hat in seiner bekannten Art und Weise gleich aufgezeigt, dass Dein Script gewisse Details noch nicht berücksichtigt. Vielleicht interessiert Dich ein kurzer Blick auf meine Lösung, die ich für einen anderen Fall entwickelt hatte?

            Liebe Grüße,

            Felix Riesterer.

            --
            ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
            1. Hallo,

              Gunnar hat in seiner bekannten Art und Weise gleich aufgezeigt, dass Dein Script gewisse Details noch nicht berücksichtigt. Vielleicht interessiert Dich ein kurzer Blick auf meine Lösung, die ich für einen anderen Fall entwickelt hatte?

              Ja sieht sehr nett aus ist auch schön eingekapselt in einem Objekt und so.

              Allerdings könnte man da genauso beanstanden dass es z.B. mit colspan und rowspan nicht umgehen kann, thead und tfoot mit verändert, etc.

              Jeena

              1. Lieber Jeena Paradies,

                Allerdings könnte man da genauso beanstanden dass es z.B. mit colspan und rowspan nicht umgehen kann, thead und tfoot mit verändert, etc.

                richtig, allerdings war das im damaligen Fall auch garantiert nicht vorhanden. Die thead und tfoot-Elemente sollten keine Probleme bereiten, da das Script sich alle tr-Elemente greift, egal ob die nun in ein thead- oder tfoot- (oder tbody-)Element verpackt sind.

                Es war nur ein alternativer Ansatz, um das Problem des OP zu lösen. Eine ideale Lösung (lies: eierlegende Wollmilchsau) lohnt hier ganz bestimmt nicht (gelle, Gunnar?).

                Liebe Grüße,

                Felix Riesterer.

                --
                ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
      2. Hi!

        IMHO geht das mit reinem CSS nicht, weil sich die Spalten nicht hovern lassen, da die Zeilen drüber liegen.

        Kommt drauf an. Das gefärbte "column"-Element muss ja nicht unbedingt ein echtes Spaltenelement sein ...
        Idee:

        • Die Tabelle wird relativ positioniert, damit sie als Referenz für absolute Positionierung verwendet werden kann. table { position:relative; }
        • Zeilenmarkierung wie gehabt: tr:hover { background:#ff0; }
        • Als Pseudo-Spalte erzeugen wir ein Kind der gehoverten td (oder th):
          td:hover:before
          {
            background:#fc0;
            bottom:0; /* bis zum unteren Ende der Tabelle */
            content:" ";
            position: absolute;
            top:0; /* bis zum oberen Ende der Tabelle */
            width:50px; /* gleiche width wie td */
            z-index:-1; /* hinter der td, um keinen Text zu verdecken */
          }

        Klappt zumindest im Firefox und Chrome, andere Browser sind noch zu testen. Nachteil: Die td dürfen kein padding und kein text-align:center haben, ansonsten stimmt die horizontale Ausrichtung des :before-Elements nicht. (Dann muss man wohl für jede Spalte noch einen passenden left-Wert angeben.)

        Noch nicht ganz ausgereift, aber vielleicht hilft die Idee ja. :)

        Viele Grüße,
        Alexander

        1. Om nah hoo pez nyeetz, Alex!

          Hi!

          IMHO geht das mit reinem CSS nicht, weil sich die Spalten nicht hovern lassen, da die Zeilen drüber liegen.
          Kommt drauf an. Das gefärbte "column"-Element muss ja nicht unbedingt ein echtes Spaltenelement sein ...

          find' ich gut.

          Matthias

          --
          1/z ist kein Blatt Papier.

  2. Liebe(r) hrastyy,

    aufgrund einer anderen Fragestellung hatte ich einmal ein Script geschrieben, welches unter anderem eine Spalte "highlighted": Tabellenfilter

    Vielleicht ist es ja von Nutzen...

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. okay....
      Nur zu dumm dass ich keine Ahnung von JavaScript habe :S

      Aber mir fällt auf dass es im Prinzip eine C#-ähnliche Struktur hat...

      Trotzdem: DANKE!
      Ich werde es mir bei Gelegenheit genauer anschauen. Jetzt muss ich diese Idee vorerst auf Eis legen, denn ich hab noch mehr vorzubereiten als diese eine Datei.