Tabellenzellen sollen bei Klick Farbe ändern

[Redaxo]

Hallo zusammen!

Ich habe folgendes Problem:

In einer Tabelle soll der Besucher durch einen Klick auf eine Zelle die Farbe ändern können. Dies habe ich mit einem einfachen onklick-Befehl gelöst.

Mein Problem besteht nun darin, dass ein weiterer Klick auf die gleiche Zelle die Änderung der Farbe wieder rückgängig machen soll - die Zelle soll also wieder die Ursprungsfarbe übernehmen.

Gibt es hierfür einen Befehl?

Danke für eure Hilfe!

[var]

Hallo zusammen!

Hallo Redaxo

Ich habe folgendes Problem:

In einer Tabelle soll der Besucher durch einen Klick auf eine Zelle die Farbe ändern können. Dies habe ich mit einem einfachen onklick-Befehl gelöst.

Mein Problem besteht nun darin, dass ein weiterer Klick auf die gleiche Zelle die Änderung der Farbe wieder rückgängig machen soll - die Zelle soll also wieder die Ursprungsfarbe übernehmen.

Gibt es hierfür einen Befehl?

Danke für eure Hilfe!

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. Zum Beispiel:

var tableRow = document.getElementById( 'tableRow' );  
  
tableRow.addEventListener( 'click', function ( ) {  
  
  if ( tableRow.style.backgroundColor = 'blue' ) {  
  
    tableRow.style.backgroundColor = 'green';  
  
  }  
  
  if ( tableRow.style.backgroundColor = 'green' ) {  
  
    tableRow.style.backgroundColor = 'blue';  
  
  }  
  
} );

Vielleicht geht es auch einfacher, dann wird mich sicher jemand korrigieren, aber so würde ich es machen. ;-)

Gruß

var

[var]

Arrrgh,

sorry,

es muss natürlich heißen if ( eigenschaft == wert ) oder noch besser if ( eigenschaft === wert )

einmal = ist zuwenig.

Freud lässt grüßen. ;-)

Ich auch.

var

[Encoder]

Ein bisschen einfacher gehts noch, mit weniger Code.

  
tableRow.style.backgroundColor = (tableRow.style.backgroundColor == 'blue' ) ? 'green' : 'blue';  

Freud lässt grüßen. ;-)
Ich auch.

Na und ich erst!

[var]

Hi Encoder

tableRow.style.backgroundColor = (tableRow.style.backgroundColor == 'blue' ) ? 'green' : 'blue';

  
Entweder ich bin zu blöd es zu finden, oder die Beschreibung zu `?:`{:.language-javascript} fehlt in der Doku.  
  
Hast du dazu 'nen Link oder ein/zwei erläuternde Worte parat? ;-)  
  
  
Gruß  
  
  
var

[var]

Ah ok. Hab's gefunden.

Ich bin raus für heute.

Too much confusion.

;-)

bye

var

[Redaxo]

Habe es nun so gelöst:

<script type="text/javascript">  
function highlight(obj)  
{  
   if(obj.className == "class2")  
      obj.className = "class1";  
   else  
      obj.className = "class2";  
}  
</script>

und

<td class="class1" onclick="highlight(this);">

Ausgangs-CCS-Class ist class1.

Bei Klick wird dann class2 aktiviert, bei erneutem Klick wechseln wir wieder zu class1.

Vielleicht nicht optimal, aber es erfüllt seinen Zweck.

Danke an alle Mithelfenden!

[Gunnar Bittersmann]

@@Redaxo:

nuqneH

Bei Klick wird dann class2 aktiviert, bei erneutem Klick wechseln wir wieder zu class1.

Vielleicht nicht optimal, aber es erfüllt seinen Zweck.

Deutlich optimaler[tm] ;-) als Style-Eigenschaften per JavaScript zu ändern.

Ausgangs-CCS-Class ist class1.

Die "class1" brauchst du nicht. Du kannst "class2" setzen und wegnehmen. (Bei mir heißt die "selected".)

Es gibt übrigens keine „CSS-Klassen“.

<td class="class1" onclick="highlight(this);">

Hast du das für jede Tabellenzelle so? Dann solltest du Event-Delegation einsetzen.

Eventhandler sollten auch nicht im HTML stehen, sondern im JavaScript registriert werden.

Qapla'

[JürgenB]

Hallo var,

var tableRow = document.getElementById( 'tableRow' );

tableRow.addEventListener( 'click', function ( ) {

if ( tableRow.style.backgroundColor = 'blue' ) {

tableRow.style.backgroundColor = 'green';

}

if ( tableRow.style.backgroundColor = 'green' ) {

tableRow.style.backgroundColor = 'blue';

}

} );

>   
  
zusätzlich zum "==" im if würde ich vor das zweite if noch ein else setzen.  
  
Gruß, Jürgen  

[var]

Hallo var,

Hallo Jürgen

zusätzlich zum "==" im if würde ich vor das zweite if noch ein else setzen.

Wenn es sowieso nur darum geht, zwischen zwei Farben zu wechseln, könnte man das zweite if auch komplett streichen und nur else schreiben ;-)

Oder man macht es gleich richtig, so wie Encoder das beschrieben hat.

Und was die Vergleichsoperatoren angeht. lol - ehrlich, die ganze Diskussion hat mich echt zerstreut. ;-)

Gruß

var

[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'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

// 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;

  
Nicht ganz. Das Event kann auch von einem th-Element oder dessen Innerem kommen. Also  
  
~~~javascript
  // wenn Event nicht von td- oder th-Element ausgelöst wurde, zum nächst höheren td- bzw. th-Element im DOM gehen  
  while (element.nodeName != 'TD' && element.nodeName != 'TH') element = element.parentNode;

Wenn th-Elemente nicht als "selected" markiert werden sollen:

  if (element.nodeName == 'TD') element.classList.toggle('selected');  

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

// wenn Event nicht von td- oder th-Element ausgelöst wurde, zum nächst höheren td- bzw. th-Element im DOM gehen

while (element.nodeName != 'TD' && element.nodeName != 'TH') element = element.parentNode;

  
Aber wenn wir schon für moderne Browser schreiben: closest() gibt es nicht nur in jQuery, sondern auch in Vanilla.  
  
~~~javascript
  // wenn Event nicht von td- oder th-Element ausgelöst wurde, zum nächst höheren td- bzw. th-Element im DOM gehen  
  element = element.closest('td, th');

Und ganz am Ende fehlte noch ``);{:.language-javascript}.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

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]

Siehe dazu auch die Empfehlung unter wiki/JavaScript/Objekte/DOM/element/style

Matthias

[Herrmann]

In einer Tabelle soll der Besucher durch einen Klick auf eine Zelle die Farbe ändern können. Dies habe ich mit einem einfachen onklick-Befehl gelöst.

Mein Problem besteht nun darin, dass ein weiterer Klick auf die gleiche Zelle die Änderung der Farbe wieder rückgängig machen soll - die Zelle soll also wieder die Ursprungsfarbe übernehmen.

Wenn der Klick entbehrlich ist, geht's besonders einfach mit :hover (siehe hier).

Gruß H.

[Herrmann]

Verzeihung, siehe hier!

Gruß H.

[Gunnar Bittersmann]

@@Herrmann:

nuqneH

Wenn der Klick entbehrlich ist, geht's besonders einfach mit :hover (siehe hier).
Verzeihung, siehe hier!

Alle Attribute class="even" sind entbehrlich, Zebrastreifen gehen besonders einfach mit :nth-child (siehe hier).

(„Hier“ ist kein sinnvoller Linktitel.)

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Herrmann!

Ich will dir ja nicht zu nahe treten, aber warum verwendest du keine Tabelle? Es soll wie eine Tabelle aussehen und es ist auch semantisch eine Tabelle. In der ersten Spalte steht das Datum in der zweiten die Art der Veranstaltung. Zeilenweise finden sich die Datensätze wieder.

Deine Konstruktion mit der ungeordneten Liste halte ich semantisch sogar für falsch, denn in einer Liste sollen gleichartige Elemente aufgezählt werden und das ist bei dir nicht der Fall. Das jeweils erste Listenelement ist ein Datum das zweite die Art der Veranstaltung.

Matthias

[Herrmann]

Ich will dir ja nicht zu nahe treten, aber warum verwendest du keine Tabelle?

Hallo Matthias!

Als ich alles fertig hatte, wurde mir klar, dass man das ganze auch mit Tabelle pur hinkriegt. War es ursprünglich auch, aber dann wollte ich's responsive haben, und da ist mir diese Lösung als erste eingefallen. Nun steht sie - nicht nur da, und ich scheue den Aufwand, alles zu überarbeiten.

Muss dazu sagen, dass ich die Website ja nur als Hobby nebenbei betreibe. Also gehe ich die Sache viel weniger systematisch an als ein Profi, nur so nach Laune, wie einer seine Eisenbahnanlage
immer mal wieder ein bisschen weiterbaut.

Ich glaube, manche Missverständnisse hier im Forum kommen dadurch zustande, dass der eine oder andere als Amateur fragt und von den Profis nach ihren Maßstäben gemessen wird. Nichts für ungut, ich habe schon viele Anregungen aus diesem Forum mitgenommen und sogar eine ganze Reihe berücksichtigt.

Deshalb kann ich aber nicht jede - wenn auch berechtigte - Kritik umsetzen. Bin trotzdem für solche Anregungen dankbar. Wahrscheinlich ist man als Amateur und in meinem Alter (70+) ja der Gefahr noch stärker ausgesetzt, blind für Neues zu werden.

Vielen Dank
H.

[Matthias Apsel]

Om nah hoo pez nyeetz, Herrmann!

Ich will dir ja nicht zu nahe treten, aber warum verwendest du keine Tabelle?

Muss dazu sagen, dass ich die Website ja nur als Hobby nebenbei betreibe. Also gehe ich die Sache viel weniger systematisch an als ein Profi, nur so nach Laune, wie einer seine Eisenbahnanlage
immer mal wieder ein bisschen weiterbaut.

Ja, das kenne ich ;-) Nichts hält so lange wie ein Provisorium. Oder Was man nicht gleich macht, macht man nie.

Ich glaube, manche Missverständnisse hier im Forum kommen dadurch zustande, dass der eine oder andere als Amateur fragt und von den Profis nach ihren Maßstäben gemessen wird.

Ja, da magst du recht haben. Ich bemühe mich deshalb oft um Zurückhaltung und vorsichtige Formulierungen, obwohl mir das nicht immer gelingt.

Deshalb kann ich aber nicht jede - wenn auch berechtigte - Kritik umsetzen. Bin trotzdem für solche Anregungen dankbar.

Gern geschehen. Im Übrigen sehen auch responsive Tabellen klasse aus.

Matthias