PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : [Javascript] Probs mit Show/Hide in IE



~Gh05t~
07-07-2005, 13:54
Hi all,
ich habe mir dieses Show/Hide Script für Tabellenzeilen geschrieben, es läuft in allen Browsern prima (Mozilla Firefox, Konqueror, Netscape), außer im MS Internet-Explorer (getestet mit v6.0). Dort passiert einfach gar nichts. Kann mir jemand irgend nen Tip geben warum? Die getElementsByName-funktion scheint nichts zurückzuliefern, aber warum?


<html>
<head>
<script language="javascript" type="text/javascript">
<!--
function toggleRow(row)
{
for (i = 0; i < document.getElementsByName(row).length; i++) {
var el = document.getElementsByName(row)[i];
if (el.className) {
el.className = (el.className == 'rowOpened') ? 'rowClosed' : 'rowOpened';
}
}
return false;
}
//-->
</script>
<style type="text/css">
<!--
.rowOpened {
display: block;
}
.rowClosed {
display: none;
}
//-->
</style>
</head>
<body>
<table bgcolor=lightgrey>
<tr>
<td colspan="2"><table><tr><td><a href="#" onClick="return toggleRow('row2');">Zeile2 an/aus</a></td></tr></table></td>
</tr>
<tr>
<td><div name="row2" class="rowOpened"><table><tr><td>Zeile2.1</td></tr></table></div></td>
<td><div name="row2" class="rowOpened"><table><tr><td>Zeile2.2</td></tr></table></div></td>
</tr>
</table>
</body>
</html>

Thx4help

nEox
07-07-2005, 16:19
Hallo ~Gh05t~,

hab eben mal in Selfhtml nachgeschaut und entdeckt das das "name"-Attribut in einem div-Tag nicht vorkommen "darf".

Dein Beispiel funktioniert im IE mit input-Tags.
getElementsByName() - Selfhtml (http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_name)

Habe von den Problem erlich gesagt noch nie gehört deshalb fällt mir als Lösung entweder:

Alle div-Tags mit "id"-Attribut versehen und dann einzeln durchgehen(in nem Array/Objekt)

oder:

Ein div-Tag um die Tabelle bauen, dem eine ID geben, dann per getElementsByTagName() das "node"-Objekt durchlaufen und die "name"-Attribute abprüfen.

http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name

Vielleicht kennt jemand noch eine bessere Lösung....

Gruß

nEox

~Gh05t~
08-07-2005, 09:00
*DOH!*
Da hab ich jetzt gar nicht dran gedacht, aber du hast recht...

Naja,das verkompliziert die Sache... mein Problem ist, dass die Tabelle dynamisch von einem PHP-Script generiert werden soll, analog auch mit dynamischen Zeilen- und Spalten-anzahlen.
Mit nodes arbeite ich in diesem Fall äußerst ungern, da die u.a. von der Formatierung des HTML-Codes abhängen.
Schön wäre es, wenn sowas ginge:


function toggleRow(row) {
element = document.getElementById(row);
el = element.getElementsByTagName('table');
for(i = 0; i < el.length; i++) {
if(el[i].className) {
el[i].className = (el[i].className == 'rowOpened') ? 'rowClosed' : 'rowOpened';
}
}
return false;
}
Dann könnte ich mir den div-tag schenken und einfach dem tr-tag ne ID geben und den darinliegenden Tables die entsprechende class zuordnen.

Wenn ich das ganze mit Nodes mache habe ich schon das Problem, dass ein Zeilenumbruch als childNode gewertet wird. Dann verliere ich mich in abfragen, unter- bzw. recursiv-schleifen. Dazu kenn ich mich mit Javascript zu wenig aus, wie kann ich denn ein Object-dump machen und ausgeben (damit ich mal weis was mein objekt für eigenschaften hat)?

nEox
08-07-2005, 11:14
Hi ~Gh05t~,

IDs sind halt einmalig. Könnte es evtl. gehen wenn du wie du schon gesagt hast dem table-Tag ne id gibst und dann die tr-Tags oder td-Tags durchläufst?

Also die Nodes durchgehen und dann alle vom Typ "tr" (oder "td" wenn du eine toggleCol-Funktion machen willst) auf den CSS-Klassennamen prüfen.
http://de.selfhtml.org/javascript/objekte/node.htm#node_type

Ist halt leider nicht so schön, aber was andres fällt mir jetzt nicht ein ;)


wie kann ich denn ein Object-dump machen und ausgeben (damit ich mal weis was mein objekt für eigenschaften hat)?
Das geht mit ner Schleife:

for (property in objectname)
alert('name' + property + ' type:' + typeof(property));
Alert() könnte auf Dauer etwas nerven, document.write() tuts auch :)

Gruß nEox