[DOM] Style eines einzelnen TD's bei Mouseover verändern

sam

sam

Erfahrenes Mitglied
moin,

ich hab folgendes script in den unendlichen weiten meiner eigenen dateien gefunden und hab mich gefragt, warum das statt eines td's bei mouseover gleich alle td's im dokument einfärbt, und wie man das ändern könnte...
PHP: 
function ChangeBG() {
for(var i = 0; i < document.getElementsByTagName("td").length; i++) {
document.getElementsByTagName("td")[i].style.backgroundColor = "#000000";
}
}
und wie ihr seht hab ich keine lösung gefunden ;)

hier mal ein kleines beispiel, was verdeutlicht, was nicht funktioniert:
PHP: 
<html>
<head>
<title>DOM</title>
<script type="text/javascript">
function ChangeBG() {
for(var i = 0; i < document.getElementsByTagName("td").length; i++) {
document.getElementsByTagName("td")[i].style.backgroundColor = "#000000";
}
}
</script>
</head>
<body>

<table border="0" width="200">
<tr>
<td onmouseover="ChangeBG();">Bei Mouseover werd ich schwarz</td>
</tr>
</table>

<br><br>

<table border="0" width="200">
<tr>
<td>Ich auch, obwohl ich das nicht soll</td>
</tr>
</table>
</body>
</html>
 
bin zwar JS-spezi, aber du rufst ja alle "TD"-elements auf. vielleich könnte man einzelne TD's per ID aufrufen? oder das script im TD direkt aufrufen:
PHP: 
<td onmouseover="this.style.backgroundColor='#000000'">Bei Mouseover werd ich schwarz</td>
 
Aber sam meinte doch DOM.

Also ich wüsste auch keine Lösung (ausser die von Caleb, welche aber kein DOM ist ;) )
Würde es auch mit "normalen" layern und deren id machen.

]Ton[
 
also mittlerweile hab ich den code verstanden und mir ist klar, warum der so funktioniert, wie er funktioniert ;)

wenn ich aber die for-schleife weglasse und statt "getElementsByTagName" "getElementsByID("this")" nehme kreig ich nen unschönen fehler und nicht das gewünschte resultat...
 
getElementsById() ist auch keine valide JavaScript-Methode, sondern die lautet getElementById() ;)

getElementsByTagName() sollte aber ohne for-Schleife und trotzdem zielgerichtet wie folgt klappen:
PHP: 
document.getElementsByTagName("td")[#].style.backgroundColor = "#000000";
wobei der hash halt die Nummer enthält, die die Stelle des Arrays anspricht, an der die gewünschte Tabellenzelle steht - sprich die x-te Tabellenzelle von Beginn deines Dokumentes an. (von 0 beginnend!)

War das jetzt konfus? :p

Geist
 
also, die funktion ChangeBG wird bei onmouseover im Objekt der überfahrenden Zelle aufgerufen, d.h. dass this bereits eine Referenz zur Zelle ist und NICHT die ID.

dein Code müsste wie folgt aussehen:

PHP: 
function ChangeBG() {
this.style.backgroundColor = "#000000";
}
 
Original geschrieben von Geist
getElementsById() ist auch keine valide JavaScript-Methode, sondern die lautet getElementById() ;)
Zum Vergrößern anklicken....
d´oh :-(
naja, jetzt gehts ja...
vielleicht sollte ich endlich maln bisschen was in der richtung lernen ;)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück