Tabellenfelder mit GetElementsByClassName färben

[Exabyte]

Guten Abend =),

Ich versuche fast den ganzen Tag nun schon bestimmte Felder in einer Tabelle bei einem MousOver-Event zu färben.

z.B:

  
function do(x) {  
 document.getElementsByClassName(x).style.backgroundColor="#99CCCC";  
}  

...  
 <tr>  
  <td class="1" onMouseOver="do('1')>&nbsp;</td>  
  <td class="2" onMouseOver="do('2')>&nbsp;</td>  
  <td class="3" onMouseOver="do('3')>&nbsp;</td>  
  <td class="3" onMouseOver="do('3')>&nbsp;</td>  
  <td class="2" onMouseOver="do('2')>&nbsp;</td>  
  <td class="1" onMouseOver="do('1')>&nbsp;</td>  
  <td class="1" onMouseOver="do('1')>&nbsp;</td>  
  <td class="2" onMouseOver="do('2')>&nbsp;</td>  
  <td class="3" onMouseOver="do('3')>&nbsp;</td>  
 </tr>  
...

Ich weiß einfach nicht ob ich hier einen Fehler in der Syntax habe oder einen Denkfehler, da die Webkonsole von FF auch nichts genaueres verrät =/

Wenn ich ID's vergebe und es so:

  
document.getElementById(x).style.backgroundColor="#99CCCC";  

mache und dabei jede Tabellen-Zelle einzeln anspreche, funktioniert es.
Das ist aber nicht gerade effizient und deswegen würde ich das ganze etwas verkürzen.

LG Exabyte

[Der Martin]

Hallo,

Ich versuche fast den ganzen Tag nun schon bestimmte Felder in einer Tabelle bei einem MousOver-Event zu färben.

andere Felder? Nicht die Tabellenfelder, auf die mit der Maus gezeigt wird?
Denn dann wäre das ja mit CSS wesentlich einfacher zu haben.

function do(x) {

document.getElementsByClassName(x).style.backgroundColor="#99CCCC";
}

  
Schon hier müsste die Fehlerkonsole einen Syntaxfehler melden, denn "do" ist ein reserviertes Keyword (zur Verwendung in do...while-Schleifen).  
  

> ~~~html

...  

>  <tr>  
>   <td class="1" onMouseOver="do('1')>&nbsp;</td>  
>   <td class="2" onMouseOver="do('2')>&nbsp;</td>  
>   <td class="3" onMouseOver="do('3')>&nbsp;</td>  
>   <td class="3" onMouseOver="do('3')>&nbsp;</td>  
>   <td class="2" onMouseOver="do('2')>&nbsp;</td>  
>   <td class="1" onMouseOver="do('1')>&nbsp;</td>  
>   <td class="1" onMouseOver="do('1')>&nbsp;</td>  
>   <td class="2" onMouseOver="do('2')>&nbsp;</td>  
>   <td class="3" onMouseOver="do('3')>&nbsp;</td>  
>  </tr>  
> ...

Ich weiß einfach nicht ob ich hier einen Fehler in der Syntax habe ...

Mehrere. Zum einen den schon angesprochenen; dann sind deine onmouseover-Attribute nicht abgeschlossen. Die phantasievolle Groß/Kleinschreibung ist vermutlich nur ein Schönheitsfehler.

oder einen Denkfehler, ...

Das vielleicht auch. Du scheinst '1', '2' und '3' als IDs zu verwenden. IDs dürfen aber in (X)HTML nicht mit einer Ziffer beginnen.

da die Webkonsole von FF auch nichts genaueres verrät =/

Och nööö ...

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Denn dann wäre das ja mit CSS wesentlich einfacher zu haben.

Ja, typischer Fall der Unsinnigkeit des Einsatzes von JavaScript.

Die phantasievolle Groß/Kleinschreibung ist vermutlich nur ein Schönheitsfehler.

Du weißt, dass das kein Fehler ist. HTML ist (im Gegensatz zu XHTML) nicht case-sensitiv. Gemischte Groß/Kleinschreibung mag unsinnig sein, aber kein Fehler.

IDs dürfen aber in (X)HTML nicht mit einer Ziffer beginnen.

In HTML5 dürfen sie das.

Qapla'

[Der Martin]

Hi,

Die phantasievolle Groß/Kleinschreibung ist vermutlich nur ein Schönheitsfehler.
Du weißt, dass das kein Fehler ist.

deswegen schrieb ich auch ganz konkret Schönheitsfehler.

IDs dürfen aber in (X)HTML nicht mit einer Ziffer beginnen.
In HTML5 dürfen sie das.

Ich sprach von HTML, nicht etwas, das sich locker an HTML anlehnt.

Ciao,
 Martin

[Exabyte]

ähm =/ ok
Ich bin jetzt irgendwie hin- und her- gerissen =/

müsste ich jetzt die Klassen z.B. Feld1, Feld2 nennen oder geht doch 1, 2, 3 ?
Muss ich die Groß- und Kleinschreibung beachten oder nicht?

Lässt sich mein Vorhaben mit document.getElementsByClassName umsetzen oder sollte ich dies auf eine andere Art umsetzen? Wenn ja --> bitte kleinen Stups in die richtige Richtung geben ;-)

Was habe ich sonst noch für Fehler gemacht ?

LG Exabyte & danke für die letzten Antworten =)

[Der Martin]

Hallo,

Ich bin jetzt irgendwie hin- und her- gerissen =/

ohje, das war so nicht gedacht.

müsste ich jetzt die Klassen z.B. Feld1, Feld2 nennen oder geht doch 1, 2, 3 ?

Du hast IDs, nicht Klassen. Und es kommt drauf an, welche HTML-Variante du verwendest. HTML5 erlaubt auch IDs, die mit Ziffern beginnen; die traditionellen Dialekte bis HTML 4.01 bzw. XHTML 1.x jedoch nicht.

Muss ich die Groß- und Kleinschreibung beachten oder nicht?

Kommt drauf an: XHTML schreibt konsequente Kleinschreibung bei Element- und Attributnamen vor, in HTML ist die durchgehende Kleinschreibung "good practice", aber nicht zwingend vorgeschrieben. Den meisten Browsern ist es egal, aber es schadet nicht, sich die übliche konsequente Kleinschreibung gleich anzugewöhnen.

Lässt sich mein Vorhaben mit document.getElementsByClassName umsetzen oder sollte ich dies auf eine andere Art umsetzen? Wenn ja --> bitte kleinen Stups in die richtige Richtung geben ;-)

Um einen gezielten Rat zu geben, müsste man die Struktur deines Dokuments kennen. Möglicherweise kann man die Elemente, die dynamisch verändert werden sollen, in CSS günstig selektieren, evtl. anhand eines gemeinsamen Vorfahrenelements. Dann wäre es günstig, mit Javascript nur diesem Vorfahrenelement dynamisch eine Klasse hinzuzufügen (bzw. wieder wegzunehmen), und die tatsächliche Formatierung sauber mit CSS zu machen.

Was habe ich sonst noch für Fehler gemacht ?

Du plenkst. Hat aber nichts mit deinem Projekt zu tun. ;-)

Ciao,
 Martin

[Matthias Apsel]

Om nah hoo pez nyeetz, Exabyte!

müsste ich jetzt die Klassen z.B. Feld1, Feld2 nennen

Ja. (in HTML < 5)

oder geht doch 1, 2, 3 ?

Nein. (in HTML < 5)

Du solltest die Klassen möglichst aussagekräftig nach ihrer Funktion benennen.

Muss ich die Groß- und Kleinschreibung beachten oder nicht?

Musst du nicht, du solltest konsequent klein schreiben.

Lässt sich mein Vorhaben mit document.getElementsByClassName umsetzen oder sollte ich dies auf eine andere Art umsetzen? Wenn ja --> bitte kleinen Stups in die richtige Richtung geben ;-)

Lässt sich, es wäre jedoch unsinnig, wenn du etwa nur die Zeilen umfärben möchtest, die gerade gehovert werden.

Stubs: CSS schau ins Wiki, wenn du dein Ziel etwas besser beschreibst, vielleicht mit einem konkreten Link, lässt sich dir konkret helfen.

Matthias

[Gunnar Bittersmann]

@@Exabyte:

nuqneH

Lässt sich mein Vorhaben mit document.getElementsByClassName umsetzen oder sollte ich dies auf eine andere Art umsetzen?

Was genau ist dein Vorhaben? Wenn über eine Tabellenzelle gehovert wird, soll diese und alle anderen Zellen derselben Klasse durch einen andersfarbigen Hintergrund markiert werden?

Wenn ja, ziehe ich „typischer Fall der Unsinnigkeit des Einsatzes von JavaScript“ zurück. Das geht mit CSS noch(!) nicht.

Es ließen sich nachfolgende Zellen selektieren à la '.\31:hover, .\31:hover ~ .\31', aber nicht vorangegangene. (Diese erst mit CSS4-Selektoren.)

(Das führende Ziffern in Klassenselektoren escapet werden müssen, könnte ein guter Grund sein, keine solchen Klassenbezeichner zu verwenden.)

In deiner JavaScipt-Funktion brauchst du den Klassenbezeichner nicht als Parameter zu übergeben. Die Klasse der gerade gehoverten Zelle (die das Evant feuert) kannst du ja per JavaScript abfragen.

Am einfachsten und performatesten dürfte auch sein, nicht alle betreffenden Tabellenzellen zufärben (und wieder zu entfärben), sondern bei einem Elternelement (table bietet sich an) den Status zu speichen (als Klasse oder data-*-Attribut) und die Darstellung per Nachfahrenselektor mit CSS zu machen.

Und nicht Event-Handler für jede einzelne Tabellenzelle, sondern für die gesamte Tabelle (wenn diese eine ID hat, erleichtert das das Selektieren) – Event-Delegation.

Im JavaScript:

var myTable = document.getElementById('myTable');  
  
// Registrierung der Events  
myTable.addEventListener("mouseover", markSelectedClass, false);  
myTable.addEventListener("mouseout", unmarkSelectedClass, false);  
  
function markSelectedClass(e)  
{  
	var currentCell = e.target;  
	  
	while (currentCell.nodeName != 'TD') currentCell = currentCell.parentNode; // falls im td-Element noch andere Elemente sind  
	  
	myTable.className = "markClass" + currentCell.className;  
}  
  
function unmarkSelectedClass(e)  
{  
	myTable.className = null;  
}

Im Stylesheet:

.markClass1 .\31,  
.markClass2 .\32,  
.markClass3 .\33  
{  
	background: #99CCCC;  
}

Die Anpassungen des JavaScripts für ältere IEs übelass ich dir. window.event und e.srcElement an verlinkter Stelle, [link:http://molily.de/js/event-handling-fortgeschritten.html#microsoft@title=attachEvent] ebenfalls bei molily.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

while (currentCell.nodeName != 'TD') currentCell = currentCell.parentNode; // falls im td-Element noch andere Elemente sind

Oh, da sollte noch eine Abbruchbedingung rein, falls das Event gar nicht von einem td-Element oder dessen Nachfolgern kommt:

while (currentCell.nodeName != 'TD' && currentCell.id != 'myTable') currentCell = currentCell.parentNode; // falls im td-Element noch andere Elemente sind

myTable.className = "markClass" + currentCell.className;

Und hier abfragen, ob man wirklich bei einer Tabellenzelle gelandet ist:

if (currentCell.nodeName == 'TD') myTable.className = "markClass" + currentCell.className;

Qapla'

[Kai345]

[latex]Mae  govannen![/latex]

(Diese erst mit CSS4-Selektoren.)

Aargh!  :)

Stur lächeln und winken, Männer!
Kai

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

deswegen schrieb ich auch ganz konkret Schönheitsfehler.

Jaja, schon gut. Ich antworte auf „Wo liegt mein Fehler?“ ja auch gern: in der Verwendung von missbilligten HTML-Attributen und @style-Attributen. ;-)

Und der „Schönheitsfehler“ liegt auch nicht etwa in der Schreibweise der Eventhandler-Attribute, sondern überhaupt in deren Verwendung. Eventhandler und JavaScript-Code haben im HTML-Dokument genauso wenig zu suchen wie Inline-Stil-Angaben.

Ich sprach von HTML, nicht etwas, das sich locker an HTML anlehnt.

An deine Abneigung gegen HTML5 kommt nichtmal meine ran.

Qapla'

[Siri]

Hallo,

document.getElementsByClassName(x).style.backgroundColor="#99CCCC";

Das Ergebnis ist ein ARRAY von Elementen. Über eine Schleife läßt sich die Sytle-Eigenschaft des jeweiligen Elements ändern, ein Array hat m.W. keinen style ;-)

document.getElementById(x).style.backgroundColor="#99CCCC";

Das Ergebnis ist EIN Element, dessen Style-Eigenschaft direkt geändert werden kann.

Grüße
Siri