Frage zu Cloner Script

[Andreas Vogt]

Hallo,
habe auf einer hilfreichen Seite ein Clonerscript gesehen. Im geklonten Objekt sind aber Input-Felder mit fortlaufender Numerierung, diese soll auch im Clon-Objekt fortlaufen.

Mein Code:

function cloner(grp) {
this.clonelist      =  {};
this.clonelist[grp] =  [];
this.clonecnt       =  {};
this.clonecnt[grp]  =  10;
this.ie6            =  !!(document.all && navigator.appVersion.indexOf("MSIE 6.")!=-1);
}

cloner.prototype.create_clone =  function(grp, id, idvar) {
var el, parent, clone, obj, cnt, radio, inp, idev, inp_name, obj = this;
this.clonecnt[grp] ++; //index um 1 erhöhen
el              =  document.getElementById(id); //zu kopierender Knoten
parent          =  el.parentNode; //Elternknoten
clone           =  el.cloneNode(true); //true = auch Unterknotenstruktur kopieren
idev =  this.clonecnt[grp];
clone.id        =  grp + "_" + this.clonecnt[grp]; // neue KnotenID

el.appendChild(clone);	//kopierter Knoten mit neuer ID einfügen  
  
// add id to list of cloned elements  
this.clonelist[grp].push(this.clonecnt[grp]);  
  
// ID's Schreiben  
this.out(grp);  

}

cloner.prototype.out =  function(grp) {
document.getElementById("out_" + grp).innerHTML = this.clonelist[grp].join(", ");
}

_customer = new cloner('customer');

Wie kann ich das Objekt bearbeiten?
mit clone.replace(idvar, idev);
geht es ja nicht.

Gruß Andreas

[Andreas Vogt]

Ich vergaß,
hier der Aufruf und die zu clonende Elemente:(in php)

<div>
<tr id="customer_10">
<td align="center">10</td>
<td><input type="Text" name="txt10" size="65" maxlength="255" /></td>
<td align="center"><select class="modulex" size="1" name="weight10"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select></td>
<td>&nbsp;</td>
<td align="center"><input type="checkbox" name="chk10" id="chk10" /></td>
<td><input type="Text" name="answer10" id="answer10" size="15" maxlength="10" /></td>
<td>&nbsp;</td>
</tr>
</div>

fortlaufende Nummer steckt in diesen Teile:
<td align="center">10</td>
txt10
chk10
answer10

[ChrisB]

Hi,

Im geklonten Objekt sind aber Input-Felder mit fortlaufender Numerierung, diese soll auch im Clon-Objekt fortlaufen.

Dann sind zwei Schritte erforderlich: Erst mal das aktuelle Zähler-Maximum ermitteln, und dann den beim erzeugen der Klone hochgezählten Wert an der entsprechenden Stelle einfügen.

Da die Zahl sich laut dem Beispielcode - btw., bei clientseitigen Problem bitte *immer* clientseitigen Code liefern, und keinen serverseitigen - als einziger Textinhalt in einem TD-Element befindet, sollte beides nicht allzu schwierig sein. Und paar Kenntnisse über dem Umgang mit dem DOM sind allerdings erforderlich. (Und das Wissen darüber, dass man Texte erst in Zahlen umwandeln muss, wenn man in JavaScript damit „rechnen” will, dafür gibt es bspw. parseInt).

MfG ChrisB

[Andreas Vogt]

Hallo,
habe auch einen kl. Teilerfolg jetzt, komme aber nicht mehr weiter.

Ich habe vor el.appendChild(clone); dies eingefügt:
clone.childNodes[0].innerHTML = idev;

clone.childNodes[0] ist das erste td-Element wo eine fortlaufende Nummer (idev)drin steht.

Klick ich nun das erste mal auf einfügen, dann funktioniert es und eine Zeile mit der korrekten Nummer wird eingefügt.
Klick ich das zweite mal, dann werden zusätzlich 2 Clone eingefügt, beim dritten mal 3 Clone etc.

Entferne ich diese eine Zeile wieder wird jeweils wieder nur 1 Clon eingefügt.
Was mach ich falsch?
Gruß Andreas

[Andreas Vogt]

Hallo,
habe mein Problem gelöst.
Weiss jetzt aber auch dass ich von JavaScript nicht wirklich viel Ahnung habe.

Hier meine Lösung:

...

cloner.prototype.create_clone =  function(grp, id, idvar) {
var el, parent, nnode, clone, obj, cnt, radio, inp, inp_name, obj = this;
this.clonecnt[grp] ++; //index um 1 erhöhen
num ++;
el              =  document.getElementById(id); //zu kopierender Knoten
parent          =  el.parentNode; //Elternknoten
clone           =  el.cloneNode(true); //true = auch Unterknotenstruktur kopieren
clone.id        =  grp + "_" + this.clonecnt[grp]; // neue KnotenID
parent.appendChild(clone); //kopierter Knoten mit neuer ID einfügen

nnode = clone.childNodes(0);  
nnode.innerHTML = num;  

...

Problem war vorallem das DOM zu verstehen, dass z.B. der Parent zu einem tr-tag kein div sein kann. Hab jetzt mein Tabellenkonstrukt komplett auf div und spans umgestellt mit css formatierung, jetzt funktionierts auch.

Gruß und Danke
Andreas

[Andreas Vogt]

Hallo,
habe Probleme mit den childNode-ID.
Folgenden Code den ich clone:

<div id="X">
<span id="num">$i</span>
<span><input type="Text" name="txt[]" size="65" /></span>
<span><select size="1" name="weight[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></span>
<span><input type="checkbox" name="chk[]" /></span>
<span><input type="Text" name="answer[]" size="15" /></span>
<span onmouseover="this.style.cursor = 'hand'" onmouseout="this.style.cursor = 'auto'"><a href="admin.php">Irgenwas</a></span>
</div>

Mein cloneNode "clone" ist das div mit id = X sowie mit Parameter True (subnodes)
Jetzt teste ich die einzelnen Kinder-Knoten:
alert(nnode.childNodes[0].innerHTML); => OK
alert(nnode.childNodes[1].innerHTML); => undefiniert
alert(nnode.childNodes[2].innerHTML); => OK
alert(nnode.childNodes[3].innerHTML); => undefiniert
usw.

D.h. alle Knoten mit gerader ID funktionieren, alle mit ungerader ID spucken als innerHTML ein undefiniert aus. Warum ist das so?

Gruß Andreas

[Beat]

Jetzt teste ich die einzelnen Kinder-Knoten:
alert(nnode.childNodes[0].innerHTML); => OK
alert(nnode.childNodes[1].innerHTML); => undefiniert
alert(nnode.childNodes[2].innerHTML); => OK
alert(nnode.childNodes[3].innerHTML); => undefiniert
usw.

D.h. alle Knoten mit gerader ID funktionieren, alle mit ungerader ID spucken als innerHTML ein undefiniert aus. Warum ist das so?

Hast du mal mit nodeType getestet? Ich kann mir vorstellen dass .innerHTML nicht für alle NodeTypes Sinn macht

mfg Beat

[ChrisB]

Hi,

Mein cloneNode "clone" ist das div mit id = X sowie mit Parameter True (subnodes)
Jetzt teste ich die einzelnen Kinder-Knoten:
alert(nnode.childNodes[0].innerHTML); => OK
alert(nnode.childNodes[1].innerHTML); => undefiniert
alert(nnode.childNodes[2].innerHTML); => OK
alert(nnode.childNodes[3].innerHTML); => undefiniert
usw.

D.h. alle Knoten mit gerader ID funktionieren, alle mit ungerader ID spucken als innerHTML ein undefiniert aus.

Du meinst keine IDs, sondern den nummerischen Index der NodeList.

Warum ist das so?

Weil Whitespace zwischen Elementen Textknoten darstellt +
Weil Textknoten kein innerHTML haben.

MfG ChrisB

[Andreas Vogt]

Hallo
danke, wusste nicht dass die Whitespace auch als Knoten zählen.

Gruß Andreas

[Struppi]

danke, wusste nicht dass die Whitespace auch als Knoten zählen.

Tun sie auch nur in manchen Browsern.

Struppi.