Tabellenzeile färben über JS-Funktion

[Onkel Schnitzel]

Moin,

ich möchte per JS gerne eine Tabellenzeile einfärben. Hiermit funktionierts:
<tr onclick="style.backgroundColor = 'red';">

Wenn ich das aber in eine Funktion auslagere, bekomm ich die Meldung 'style is not defined':

<script type="text/javascript">
function listeKlick () {
  style.backgroundColor = 'red';
}
</script>

<tr onclick="listeKlick()">

Wie ihr schon merkt, bin ich in JavaScript nich so der Knaller. Vielleicht habt ihr ja nen Tip.

Beste Grüße
Onkel Schnitzel

[fastix®]

Moin!

<script type="text/javascript">
function listeKlick () {
  style.backgroundColor = 'red';
}
</script>

<tr onclick="listeKlick()">

Im Gegensatz zur direkten Anwendung (<tr onclick="style.backgroundColor = 'red';">) weiß Javascript nicht, das und welches Dom-Objekt Du meinst.

Übergib also mit dem Schlüsselwort 'this' das aktuelle Objekt:

<tr onclick="listeKlick(this);">

und werte es in Javascript aus:

<script type="text/javascript">  
function listeKlick (obj) {  
   obj.style.backgroundColor = 'red';  
}  
</script>

Nur 12 Zeichen mehr :)

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

[Klawischnigg]

Hi there,

Wenn ich das aber in eine Funktion auslagere, bekomm ich die Meldung 'style is not defined':

überleg' einmal woher die Funktion wissen soll, welchen Hintergrund welchen Elements Du ändern möchtest...

Wie ihr schon merkt, bin ich in JavaScript nich so der Knaller.

Das scheint mir der verharmloseste Euphemismus der letzten Jahre zu sein...

[EKKi]

Mahlzeit Onkel Schnitzel,

ich möchte per JS gerne eine Tabellenzeile einfärben.

Nein, das möchtest Du nicht. Du möchtest per Javascript einer Tabellenzeile die Information verpassen, dass sie "in irgendeiner Form anders" ist als alle anderen.

Dies kannst Du erreichen, indem Du ihr z.B. eine Klasse namens "wichtig", "markiert" o.ä. verpasst.

Wie Tabellenzeilen mit dieser Klasse dann aussehen, definierst Du sinnvollerweise dort, wo Du auch das sonstige Aussehen aller Deiner Elemente beschreibst: im Stylesheet.

tr.markiert {  
  background-color: red;  
}

<tr onclick="[ref:self812;javascript/sprache/objekte.htm#this@title=this].[ref:self812;javascript/objekte/htmlelemente.htm#universaleigenschaften@title=className] = 'markiert';">

Dies als Anregung - alles weitere (z.B. das Wieder-wegnehmen der Klasse beim nächsten Klick usw.) überlasse ich dann mal Dir ...

Wenn ich das aber in eine Funktion auslagere, bekomm ich die Meldung 'style is not defined':

<script type="text/javascript">
function listeKlick () {
  style.backgroundColor = 'red';
}
</script>

Das ist kein Wunder ... schließlich existiert weder in Deiner Funktion noch global irgendein Objekt dieses Namens (wenn Du es nicht erstellt hast).

Im Scope eines HTML-Elements (wie z.B. einer Tabellenzeile) existiert aber ein entsprechend benanntes Unterobjekt des aktuellen Objekts. Deshalb funktioniert es direkt (ist aber weder schön noch sinnvoll) und nicht per Funktion.

MfG,
EKKi

[Onkel Schnitzel]

Dies kannst Du erreichen, indem Du ihr z.B. eine Klasse namens "wichtig", "markiert" o.ä. verpasst.

Wie Tabellenzeilen mit dieser Klasse dann aussehen, definierst Du sinnvollerweise dort, wo Du auch das sonstige Aussehen aller Deiner Elemente beschreibst: im Stylesheet.

Fantastisch, genauso wollte ichs. So kann ich an einer Stelle meine Farbe definieren.

Danke an Dich und alle anderen!

[Joachim]

Hi,

function listeKlick () {
  style.backgroundColor = 'red';
}

Du sagst Deiner Funktion ja nicht, _wer_ eingefärbt werden soll. Du musst also mit dem onclick eine Referenz übergeben, am einfachsten machst Du das so:

onclick="listeKlick(this)"

in "this" steckt nun das übergeordnete Element, also tr. Du brauchst also gar nicht weiter mit id's o. ä. zu arbeiten. Nun muss Deine Funktion den Parameter auch annehmen, dafür setzt Du die lokale Variable el ein, der Name ist aber Schall und Rauch:

function listeKlick (el) {
    el.style.backgroundColor = 'red';
}

ich empfehle Dir aber, lieber Klassennamen zu ändern / zu vergeben, anstatt direkt im JS Eigenschaften zu setzen, damit bist Du flexibler.

Gruesse, Joachim