Event-Handler "onmouseover" "onmouseout"

[Beni]

wie kann ich mit den Event-Handlern "onmouseover" "onmouseout" den Inhalt in einer anderen Tabellenzelle steuern.

In der aktuellen Zelle funktioniert dies mit dem "this" - Operator einwandfrei:

<td onMouseover="this.bgColor='ffff33'" onMouseout="this.bgColor='ffffff'">

[Der Martin]

Hallo Beni,

wie kann ich mit den Event-Handlern "onmouseover" "onmouseout" den Inhalt in einer anderen Tabellenzelle steuern.

dazu braucht es zwei Schritte.
Du musst die Zelle, die du ansprechen willst, identifizieren können. Dafür sorgt man, indem man dem HTML-Element eine ID verpasst.
Und du musst in deiner Javascript-Anweisung auf das so gekennzeichnete Element Bezug nehmen (anstatt this, was ja das Element adressiert, in dem es steht). Dafür gibt es die Funktion getElementById().

Mit diesen Hinweisen möchte ich dich bitten, erst einmal selbst weiter zu forschen. Das ist nämlich gar nicht so kompliziert.

In der aktuellen Zelle funktioniert dies mit dem "this" - Operator einwandfrei:
<td onMouseover="this.bgColor='ffff33'" onMouseout="this.bgColor='ffffff'">

Das dürfte es eigentlich nicht. Denn vor der hexadezimalen Farbangabe fehlt das '#'. Du verwendest also einen sehr fehlertoleranten Browser - vermutlich den Internet Explorer, der gerade _wegen_ seiner Fehlertoleranz (und weil er selbst einige Bugs hat) zum Testen denkbar ungeeignet ist.

Übrigens solltest du dir gleich angewöhnen, deine Eventhandler konsequent klein zu schreiben. Das ist erstens innerhalb des Scripts die korrekte Schreibweise, und zweitens muss, wenn du mal auf XHTML umsteigen solltest, auch im HTML-Element das Attribut klein geschrieben werden.

So long,

Martin

[Ashura]

Hallo Martin.

Du musst die Zelle, die du ansprechen willst, identifizieren können. Dafür sorgt man, indem man dem HTML-Element eine ID verpasst.

Alternative:

[ref:self811;javascript/objekte/document.htm@title=document].[ref:self811;javascript/objekte/document.htm#get_elements_by_tag_name@title=getElementsByTagName]("table")[i].[ref:self811;javascript/objekte/htmlelemente.htm#table@title=rows][j].[ref:self811;javascript/objekte/htmlelemente.htm#tr@title=cells][k]

(Wobei i, j und k Indizies repräsentieren.)

Dies bietet sich an, wenn das Markup nicht verändert werden soll.

Einen schönen Donnerstag noch.

Gruß, Ashura

[Der Martin]

Hallo Ashura,

Alternative:
[ref:self811;javascript/objekte/document.htm@title=document].[ref:self811;javascript/objekte/document.htm#get_elements_by_tag_name@title=getElementsByTagName]("table")[i].[ref:self811;javascript/objekte/htmlelemente.htm#table@title=rows][j].[ref:self811;javascript/objekte/htmlelemente.htm#tr@title=cells][k]

sehr schön, das kannte ich auch noch nicht.
Liegt aber wohl daran, dass ich noch nie auf die Idee gekommen bin, danach zu suchen. ;-)

Dies bietet sich an, wenn das Markup nicht verändert werden soll.

Ja, und es ist durch die Zeilen/Spalten-Indizierung sehr übersichtlich.
So long,

Martin

[Gernot Back]

Hallo Ashura,

[ref:self811;javascript/objekte/document.htm@title=document].[ref:self811;javascript/objekte/document.htm#get_elements_by_tag_name@title=getElementsByTagName]("table")[i].[ref:self811;javascript/objekte/htmlelemente.htm#table@title=rows][j].[ref:self811;javascript/objekte/htmlelemente.htm#tr@title=cells][k]

wenn die Zelle, die verändert werden soll, in derselben Tabelle liegt wie die, deren Mouseover dies auslösen soll, kann Beni aber doch seine Zelle auch über this.parentNode.parentNode ansprechen. Da braucht er sich darum, die wievielte Tabelle in seinem Quellcode es ist, gar keine Gedanken zu machen. Wenn es immer die rechte oder linke Nachbarzelle ist, könnte er auch mit this.nextSibling bzw. this.previousSibling arbeiten. Bei der über(...über)nächsten oder vor(..vor)letzten Zelle muss Beni die entsprechenden Geschwister halt entsprechend oft eins über das andere ansprechen.

Gruß Gernot

[MudGuard]

Hi,

wenn die Zelle, die verändert werden soll, in derselben Tabelle liegt wie die, deren Mouseover dies auslösen soll, kann Beni aber doch seine Zelle auch über this.parentNode.parentNode ansprechen.

this.parentNode.parentNode ist aber NICHT die Tabelle, wenn this die Zelle ist ...

cu,
Andreas

[Gernot Back]

Hallo MudGuard,

this.parentNode.parentNode ist aber NICHT die Tabelle, wenn this die Zelle ist ...

Stimmt, ich habe mal wieder das implizite TBODY-Element vergessen. Dann halt noch eine parentNode. mehr.

Gruß Gernot

[Ashura]

Hallo Gernot.

wenn die Zelle, die verändert werden soll, in derselben Tabelle liegt wie die, deren Mouseover dies auslösen soll, kann Beni aber doch seine Zelle auch über this.parentNode.parentNode ansprechen. […]

Diese Methode habe ich absichtlich nicht erwähnt.
Hierbei musst du dir zusätzlich Gedanken um Textknoten in Form von Whitespace machen. Denn wer sagt dir, dass this.nextSibling nicht ein solcher Textknoten ist? Zudem war da noch das Problem mit dem implizierten tbody…

Und unübersichtlich kann es auch noch werden:

<table>  
  <tr>  
    <th onmouseover="/* ↓ */">Ausgangspunkt</th>  
    <th>Bar</th>  
  </tr>  
  <tr>  
    <td>Baz</td>  
    <td>Zielpunkt</td>  
    </tr>  
</table>

1. Methode:
    document.getElementsByTagName("table")[0].rows[1].cells[1].style.backgroundColor = '#ff0000';

2. Methode:
    this.parentNode.nextSibling.firstChild.nextSibling.style.backgroundColor = '#ff0000';

Einen schönen Donnerstag noch.

Gruß, Ashura