nicht angemeldet
DOM - document.getElementsByName()
Hallo, ein kleines großes Problem mit dem DOM !
Hier zuerst das Problem - und unten die Beschreibung:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function farbe(nummer)
{
zellen = document.getElementsByName('zelle');
for (i = 0; i < zellen.length; i++)
{
zellen[i].className = "zelle1";
if (nummer == i)
zellen[i].className = "zelle2";
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD NAME="zelle" ID="zelle" CLASS="zelle1" onClick="farbe(0)"> </TD>
<TD NAME="zelle" ID="zelle" CLASS="zelle1" onClick="farbe(1)"> </TD>
<TD NAME="zelle" ID="zelle" CLASS="zelle1" onClick="farbe(2)"> </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Drei Zellen einer Tabelle erhalten per CSS die Klasse "zelle1" als Vorgabewert zugewiesen. (z.B. Zellenhintergrund weiss)
Das JavaScript weisst nun der jeweils angeklickten Zelle die Klasse "zelle2" zu. (z.B. Zellenhintergrund farbig)
Alle anderen Zellen erhalten ihre vorgegebene Formatierung "zelle1". (z.B. Zellenhintergrund weiss)
Die Anzahl der Zellen habe ich mit
zellen = document.getElementsByName('zelle') ermittelt.
Damit müßte ich ja eigentlich das NAME-Attribut von <TD> ( hier "zelle" ) ansprechen.
Tatsächlich werden aber die ID 's von <TD> ermittelt:
ändere ich die NAME-Attribute, funktioniert das Script trotzdem, ändere ich die ID ' s, gehts nicht mehr.
Wo liegt der Hund begraben ?
Mfg Hund
-
Hallo,
<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">function farbe( element )
{
document.getElementsByName(element)[0].className = "zelle2";
}</SCRIPT>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD NAME="zelle1" CLASS="zelle1" onClick="farbe( 'zelle1' )"> </TD>
<TD NAME="zelle2" CLASS="zelle1" onClick="farbe('zelle2')"> </TD>
<TD NAME="zelle3" CLASS="zelle1" onClick="farbe('zelle3')"> </TD>
</TR>
</TABLE>
</BODY>
</HTML>Meintest du das?
-
Hy,
Meintest du das?
eigentlich nicht .....
zellen = document.getElementsByName('zelle');
Die Variable "zellen" müßte eigentlich ein Array sein, das alle TAGS
mit dem Namen "zelle" enthält.Die einzelnen Zellen würde ich gerne über den jeweiligen Index-Wert des Arrays ansprechen.
Wenn es drei TAGS mit dem Namen "zelle" gibt, möchte ich z.B. die zweite Zelle mit zellen[1] ansprechen und einen Klassn-Namen zuweisen.
Mfg Hund
-
Hallo,
hm... naja...
der Fehler lag bei dir bei "document.getElementsByName( bla )[i].className...
das muss also so aussehen:
getElementsByName( elementname )[ elementsnummer ]bei dir fehlte die elemntsnummer...
Tschau.
-
-
-
Hallo,
Die Anzahl der Zellen habe ich mit
zellen = document.getElementsByName('zelle') ermittelt.
Naja, die Anzahl wuerde mit zellen.length erhalten, zellen ist ein Objektarray. Hier liegt auch das Problem: getElementsByName() kann/sollte nur funktionieren, wenn ein Element auch ein name-Attribut besitzt (z. B. input) -- je nach Browser wird das unterschiedlich gehandhabt und somit ist das nicht besonders portabel.
Einfacher Test:
<body onload="alert(document.getElementsByName('zelle').length)">im IE6: 0, Mozilla und Firefox: 3, Opera 7.x: 0
Probiere es alternativ so: Verwende IDs, die aber eindeutig sein muessen, z. B. zelle1, zelle2, zelle3 usw.
Zum Ansprechen aller IDs, die mit "zelle" beginnen, kaeme eine Funktion getElementsByIdFragment() in Betracht (in Analogie zu getElementsByClassName(), siehe http://www.styleassistant.de/tips/tip100.htm).
Dein Beispiel koennte dann so laufen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 04/04</title>
<style type="text/css">
<!--.zelle1
{
color: #FF0;
background-color: #00C;
}.zelle2
{
color: #FFF;
background-color: #090;
}-->
</style>
<script language="JavaScript" type="text/javascript">
<!--function farbe(nummer)
{
zellen = getElementsByIdFragment('zelle');
for (i = 0; i < zellen.length; i++)
{
zellen[i].className = "zelle1";
if (nummer == i)zellen[i].className = "zelle2";
}
}function getElementsByIdFragment(idfr)
{
var all_obj,ret_obj=new Array(),j=0;
if(document.all)all_obj=document.all;
else if(document.getElementsByTagName && !document.all)all_obj=document.getElementsByTagName("*");
for(i=0;i<all_obj.length;i++)
{
if(all_obj[i].id.substr(0,idfr.length)==idfr)
{
ret_obj[j]=all_obj[i];
j++;
}
}
return ret_obj;
}
//-->
</script>
</head>
<body>
<table>
<tr>
<td id="zelle1" class="zelle1" onclick="farbe(0)">...</td>
<td id="zelle2" class="zelle1" onclick="farbe(1)">...</td>
<td id="zelle3" class="zelle1" onclick="farbe(2)">...</td>
</tr>
</table>
</body>
</html>MfG, Thomas
-
Hallo Thomas,
herzlichen Dank für die ausführliche Antwort: der springende Punkt ist tatsächlich, dass TD kein NAME-Attribut besitzt ........ :-/
Konstrukten mit
document.getElementsByName() gehe ich dann lieber ganz aus dem Weg - habe mir diese Lösung audgedacht:Spreche die Tabelle mit
tab = document.getElementById('tabelle'); an und
ermittle mit tab.getElementsByTagName('td') alle Zellen DIESER Tabelle. Die Tabelle darf eben nur nicht zu viele Zellen haben, die
unbehandelt bleiben sollen ....Mfg Hund
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--.zelle
{
background-color:white;
border:1px solid black;
}.zelle1
{
background-color:white;
border:1px solid black;
}.zelle2
{
background-color:red;
border:1px solid black;
}//-->
</STYLE><SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function farbe(nummer)
{ebene = document.getElementById('tabelle');
zellen = ebene.getElementsByTagName('td');for (i = 0; i < zellen.length; i++)
{
zellen[i].className = "zelle1";
if (nummer == i)
zellen[i].className = "zelle2";
}}
//-->
</SCRIPT></HEAD>
<BODY>
<TABLE ID="tabelle">
<TR NAME="reihe" ID="reihe" CLASS="reihe">
<TD NAME="zelle" ID="zelle1" CLASS="zelle" onClick="farbe(0)"> </TD>
<TD NAME="zelle" ID="zelle2" CLASS="zelle" onClick="farbe(1)"> </TD>
<TD NAME="zelle" ID="zelle3" CLASS="zelle" onClick="farbe(2)"> </TD>
</TR>
</TABLE>
</BODY>
</HTML>
-
-
Drei Zellen einer Tabelle erhalten per CSS die Klasse "zelle1" als Vorgabewert zugewiesen. (z.B. Zellenhintergrund weiss)
Das JavaScript weisst nun der jeweils angeklickten Zelle die Klasse "zelle2" zu. (z.B. Zellenhintergrund farbig)
Alle anderen Zellen erhalten ihre vorgegebene Formatierung "zelle1". (z.B. Zellenhintergrund weiss)Wenn es wirklich nur das machen soll:
<TD NAME="zelle" CLASS="zelle1" onClick="farbe(this)"> </TD>
<TD NAME="zelle" CLASS="zelle1" onClick="farbe(this)"> </TD>
<TD NAME="zelle" CLASS="zelle1" onClick="farbe(this)"> </TD>function farbe(obj)
{
if(obj.className)
obj.className = obj.className == "zelle1" ? "zelle2" : zelle1";}
Struppi.
-
Hy Struppi,
Wenn es wirklich nur das machen soll:
leider nicht! Trozdem Dank; ich liebe solche Konstrukte
obj.className = obj.className == "zelle1" ? "zelle2" : zelle1";
und werde das sofort cutten && pasten !
Meinen neuer Ansatz hänge ich gleich an Herrn Meinekes Antwort an;
Dein Statement - falls erforderlich - ist ausdrücklich erwünscht.Mfg Hund
-
Das war natürlich ein Fehler drin.
Wenn es wirklich nur das machen soll:
<TD NAME="zelle" CLASS="zelle1" onClick="farbe(this)"> </TD>
<TD NAME="zelle" CLASS="zelle1" onClick="farbe(this)"> </TD>
<TD NAME="zelle" CLASS="zelle1" onClick="farbe(this)"> </TD>function farbe(obj)
{
if(obj.className)
obj.className = obj.className == "zelle1" ? "zelle2" : "zelle1";}
Aber um den vorherigen Zustand zu restaurieren musst du dir die alte Zelle merken. Du willst vermutlich eher das:
var old = null;
function farbe(obj)
{
if(!obj.className) return;old.className = 'zelle1'; // je nachdem was
obj.className = 'zelle2'; // der 1. oder 2. Zustand ist
old = obj;}
Struppi.
-