nicht angemeldet
Einbinden von Knoten in eine Tabelle/ Adressierung der neuen Kn.
Hoi,
ich mach jetzt schon seit mehr als 30 Stunden an diesem dummen Dhtml script nach DOM Standart rum, aber es funktioniert einfach nicht so, wie es soll.
Ich habe vor in eine Tabelle verschiedene Elemente einzuhängen. Das funktioniert sogar.
Aber, diese neuen Elemente sind total durcheinander und Texte stehen oft in den falschen Elementen.
Ich weis jetzt echt nicht mehr weiter und auch stundenlanges rumprobieren hilft nicht.
Wäre nett, wenn mir einer einen Hinweis geben könnte!
Die Tabelle:
<table width="104" border="0" align="center" valign="top" id="box"></table>
Das Script:
function intruder()
{
box.firstChild.appendChild(tabellenreihe);
box.firstChild.lastChild.appendChild(tabellenspalte);
box.firstChild.lastChild.lastChild.setAttributeNode(tabellenfarbe);
box.firstChild.lastChild.lastChild.appendChild(span);
box.firstChild.lastChild.lastChild.lastChild.style.fontSize = "7pt";
box.firstChild.lastChild.lastChild.lastChild.appendChild(datum);
box.firstChild.lastChild.lastChild.appendChild(fett);
box.firstChild.lastChild.lastChild.lastChild.appendChild(nick);
box.firstChild.lastChild.lastChild.appendChild(italic);
box.firstChild.lastChild.lastChild.lastChild.appendChild(span);
box.firstChild.lastChild.lastChild.lastChild.firstChild.style.width = "104px";
box.firstChild.lastChild.lastChild.lastChild.firstChild.style.overflow = "hidden";
box.firstChild.lastChild.lastChild.lastChild.firstChild.appendChild(text);
}
Die Variablen habe ich natürlich schon definiert, hab sie aber aus Platzgründen hier nicht gepostet.
Das ganze in Aktion:
http://www.crw-gaming.de/dono/webcom/com-shoutbox.php (auf 1 klicken)
Und so sollte das Ganze eigendlich aussehen:(tags zur Verdeutlichung)
<7pt>datum</7pt>
<b>nick</b>
<i>text</i>
Also, meiner Meinung nach müsste das so funktionieren und ich hab auch keinen blassen Schimmer warum es das nicht tut.
PS: SELFHTML hab ich quasi schon auswendig gelernt. Das hilft mir auch nicht weiter.
PPS: Wie sind die Deppen vom W3C nur auf so einen abartig hirnverbrannten Schwachsinn wie DOM gekommen?
-
Hi DONO,
ohne mich näher mit der ganzen Sache zu befassen:
Auf der angegebenen Website passiert bei mir gar nix außer daß ich Fehlermeldung für Zeile 25, Zeichen 14 krieg:
Nimm die ö's aus dem Javascript raus und ersetz sie durch oe !Meine Anregung erstmal:
Ich hab auch schon viel mit so Kram rumgebastelt und es tauchten immer wieder Probleme bei der Verwendung von firstChild und lastChild auf.
Probiers mal mit childNodes[] aus.Schau ab und zu mal nach, was du da so produziert hast, z.B. mit:
alert(box.firstChild.lastChild.lastChild.lastChild);Probiers auf jeden Fall im IE und! NS aus, mindestens!
gruß
ptr-
Wow, danke. War gerade schon verzweifelt, weil keiner antwortet.
Das mit den Umlauten werd ich machen. Hab ich irgendwie verpeilt.
Das mit den ChildNodes[] is ein guter Tipp. Nach so was hab ich immer gesucht, aber scheinbar irgendwie die Erklärung falsch verstanden.
Das mit dem Kontrollieren hab ich aber schon. Is wirklich wichtig. Hat mir auch schon geholfen. Z.B. is in DOM ja lustiger Weise der Tabellenbody, auch wenn er leer is, ein eigenes Element. Da muss man auch erst mal draufkommen.
Also, vielen Dank. Ich denke das hat mir schon viel weitergeholfen.-
Ok, funtioniert. (IE 6)
Danke nochmal an ptr.
Der Hund lag wriklich in der Verwendung von firstChild uns lastChild begraben. Diese beiden Anweisungen werden scheinbar ungenau befolgt.Außerdem habe ich bemerkt, dass man keine Element-variable (wie: var umbruch = document.createElement("br"); ) zweimal verwenden darf.
Naja, sind halt Deppen, die vom w3c. Für alle die damit in Zukunft Probs haben werden, hier mein (auf IE) funktionierender script:
<table width="110" border="1" align="center" valign="top" id="box"></table>
<script type="text/javascript">
<!--var box = document.getElementById("box");
var tabellenreihe = document.createElement("tr");
var tabellenspalte = document.createElement("td");
var tabellenfarbe = document.createAttribute("bgcolor");
tabellenfarbe.nodeValue = "#FFCC66";
var span = document.createElement("span");
var umbruch = document.createElement("br");
var umbruch2 = document.createElement("br");
var fett = document.createElement("b");
var italic = document.createElement("i");function intruder()
{
var datum = document.createTextNode("datum");
var nick = document.createTextNode("nick");
var text = document.createTextNode("text");box.childNodes[0].appendChild(tabellenreihe);
box.childNodes[0].childNodes[0].appendChild(tabellenspalte);
box.childNodes[0].childNodes[0].childNodes[0].setAttributeNode(tabellenfarbe);
box.childNodes[0].childNodes[0].childNodes[0].appendChild(span);
box.childNodes[0].childNodes[0].childNodes[0].childNodes[0].style.fontSize = "7pt";
box.childNodes[0].childNodes[0].childNodes[0].childNodes[0].appendChild(datum);
box.childNodes[0].childNodes[0].childNodes[0].appendChild(umbruch);
box.childNodes[0].childNodes[0].childNodes[0].appendChild(fett);
box.childNodes[0].childNodes[0].childNodes[0].childNodes[2].appendChild(nick);
box.childNodes[0].childNodes[0].childNodes[0].appendChild(umbruch2);
box.childNodes[0].childNodes[0].childNodes[0].appendChild(italic);
box.childNodes[0].childNodes[0].childNodes[0].childNodes[4].style.width = "104px";
box.childNodes[0].childNodes[0].childNodes[0].childNodes[4].style.overflow = "hidden";
box.childNodes[0].childNodes[0].childNodes[0].childNodes[4].appendChild(text);
}//-->
</script>-
hi dono,
ich weiß ja nicht, ob das wirklich Deppen sind vom W3C.
Die versuchen nur, die ganze Geschichte mal ein bißchen zu vereinheitlichen und ich finds gut, daß es sowas gibt.
Was die Browser draus machen ist leider nicht immer das gelbe vom Ei.
Mag gar nicht dran denken, was das erstmal für ein Kampf wäre, wenns das W3C nicht gäbe.
Wenn du sowas schreibt wie:
var zelle=document.createElement("td");
dann ist in der Variablen "zelle" eine Referenz auf die erzeugte Tabellenzelle gespeichert und nicht eine Referenz auf auf die Methode "createElement()".
Du kannst dann also jederzeit mit der Variablen "zelle" auf genau dieses Element(die erzeugte Tabellenzelle) zugreifen und das ist auch gut so.
Wenn du dann allerdings "zelle" woanders einfügst(mit appendChild();), dann greifst du auch auf das konkrete Element zu und setzt es an der neuen Stelle ein. Da wos vorher war, isses dann natürlich nicht mehr, weil dus ja nur einmal erzeugt hast und es das Element demzufolge auch nur einmal gibt.
Allerdings kannst du es mit:
var zellenkopie=zelle.cloneNode(true);
kopieren und die Kopie dann weiterverwenden. Das "true" in den Klammern bewirkt, daß alle im Knoten(Tabellenzelle) enthaltenen Unterknoten mitkopiert werden.gruß
ptr -
<table width="110" border="1" align="center" valign="top" id="box"></table>
<script type="text/javascript">
<!--var box = document.getElementById("box");
var tabellenreihe = document.createElement("tr");
var tabellenspalte = document.createElement("td");
var tabellenfarbe = document.createAttribute("bgcolor");
tabellenfarbe.nodeValue = "#FFCC66";
var span = document.createElement("span");
var umbruch = document.createElement("br");
var umbruch2 = document.createElement("br");
var fett = document.createElement("b");
var italic = document.createElement("i");function intruder()
{
var datum = document.createTextNode("datum");
var nick = document.createTextNode("nick");
var text = document.createTextNode("text");box.childNodes[0].appendChild(tabellenreihe);
box.childNodes[0].childNodes[0].appendChild(tabellenspalte);
box.childNodes[0].childNodes[0].childNodes[0].setAttributeNode(tabellenfarbe);
box.childNodes[0].childNodes[0].childNodes[0].appendChild(span);
box.childNodes[0].childNodes[0].childNodes[0].childNodes[0].style.fontSize = "7pt";
box.childNodes[0].childNodes[0].childNodes[0].childNodes[0].appendChild(datum);
box.childNodes[0].childNodes[0].childNodes[0].appendChild(umbruch);
box.childNodes[0].childNodes[0].childNodes[0].appendChild(fett);
box.childNodes[0].childNodes[0].childNodes[0].childNodes[2].appendChild(nick);
box.childNodes[0].childNodes[0].childNodes[0].appendChild(umbruch2);
box.childNodes[0].childNodes[0].childNodes[0].appendChild(italic);
box.childNodes[0].childNodes[0].childNodes[0].childNodes[4].style.width = "104px";
box.childNodes[0].childNodes[0].childNodes[0].childNodes[4].style.overflow = "hidden";
box.childNodes[0].childNodes[0].childNodes[0].childNodes[4].appendChild(text);***********************************************
sollte auch so gehen:var zeile=box.childNodes[0].appendChild(tabellenreihe);
var zelle=zeile.appendChild(tabellenspalte);
zelle.setAttributeNode(tabellenfarbe);
var bereich=zelle.appendChild(span);
bereich.style.fontSize="7pt";
bereich.appendChild(datum);
zelle.appendChild(umbruch);
var fettertext=zelle.appendChild(fett);
fettertext.appendChild(nick);
umbruch2=umbruch.cloneNode(true);
zelle.appendChild(umbruch2);
var kursivtext=zelle.appendChild(italic);
kursivtext.style.width="104px";
kursivtext.style.overflow="hidden";
kursivtext.appendChild(text);
**************************************
oder für die letzten 3 Zeilen:
with(kursivtext){style.width="104px";style.overflow="hidden";appendChild(text);}
*************************************************************************die nächste Tabellenzeile läßt sich auch so erzeugen:
var zeile2=zeile.cloneNode(true);
zeile2.childNodes[0].childNodes[0].childNodes[0].nodeValue=datum2;
zeile2.childNodes[0].childNodes[2].childNodes[0].nodeValue=nick2;
zeile2.childNodes[0].childNodes[4].childNodes[0].nodeValue=text2;
box.childNodes[0].appendChild(zeile2);*********************************************************
ACHTUNG:
Für datum2, nick2 und text2 keine neuen Textknoten erzeugen, sondern einfach nur die entsprechenden Strings in die Variablen speichern.
Die Textknoten sind schon vorhanden, es muß nur deren Wert (value) geändert werden.}
//-->
</script> -
hab hier im Forum folgenden interessanten Link zum Thema gefunden:
http://home.t-online.de/home/dj5nu/js-dom-nodelisting.html
-
-
-
-
Mir ist eingefallen, dass ich vieleicht noch die box Variable angeben sollte:
var box = document.getElementById("box");Kann mir keiner Helfen? Nur ein kleiner Tipp. Irgendwas, BITTE!