Tabellenzellen sollen bei Klick Farbe ändern

[Gunnar Bittersmann]

@@var:

nuqneH

Zum Beispiel:

Schlechtes Beispiel. Da sollte man sich kein Beispiel dran nehmen.

Warum ist das immer noch so „schwer […] in die Köpfe der Menschen zu bringen, dass Layout-Informationen *in den CSS-Code* gehören, *nicht* in den JavaScript-Code. JavaScript ist wunderbar geeignet, die DOM-Objekte auf eine Weise zu verändern, die in CSS genutzt werden kann.“ [Cheatah]

Wenn du willst, dass die Farbe wieder zurückwechselt, musst du die Anweisung zum Wechseln der Farbe in deiner onclick-Funktion an eine Bedingung knüpfen.

Nein, musst du nicht.

var specialTableCellElement = document.getElementById('specialTableCell');  
  
specialTableCellElement.addEventListener('click', function ()  
{  
  specialTableCellElement.classList.toggle('selected');  
}

Die Farbe wird im Stylesheet angegeben. Die hat im JavaScript NICHTS ZU SUCHEN!

.selected { background: green }  

Wenn man Browser unterstützen möchte, die classList nicht kennen, muss man doch eine Fallunterscheidung machen.

specialTableCellElement.addEventListener('click', function ()  
{  
  specialTableCellElement.className = (specialTableCellElement.className == 'selected') ? '' : 'selected';  
}

Dann darf die Zelle aber keine anderen Klassen haben.

Oder man verwendet statt Klasse ein data-Attribut.

Und ja, Redaxo sprach von einer Zelle, nicht Zeile.

Und meinte vermutlich nicht eine bestimmte Zelle "specialTableCell", sondern dass der Effekt bei allen Zellen der Tabelle derselbe ist.

Also das click-Event für die Tabelle registrieren und darauf reagieren, aus welcher Zelle das Event hochgebubblet ist. (Event-Delegation)

var specialTableElement = document.getElementById('specialTable');  
  
specialTableElement.addEventListener('click', function (event)  
{  
  var element = event.target;  
  
  // wenn Event nicht von td-Element ausgelöst wurde, zum nächst höheren td-Element im DOM gehen  
  while (element.nodeName != 'TD') element = element.parentNode;  
  
  element.classList.toggle('selected');  
}

Qapla'