[Erledigt] verschachtelte nodes via DOM ins Dokument einfügen

litterauspirna · 20.12.2010, 16:14

Hallo Leute,

wie auf einfache Art und Weise Nodes in ein Dokument via DOM Manipulation einfügen kann weiß ich ja und habe ich auch schon paar mal gemacht.

Aber wie kann ich das erreichen das ich so etwas dann via DOM Scripting hinzufügen kann, also verschachtelte Nodes auf einen Klick. Es soll dann beim Klick auf einen Link so etwas heraus kommen.

Code:

<tr>
    <td>
        <input type="text" name="ein_name" class="css_class">
    </td>
    <td>
        <input type="text" name="ein_name" class="css_class">
    </td>
    <td>
        <input type="text" name="ein_name" class="css_class">
    </td>
    <td>
        <input type="text" name="ein_name" class="css_class">
    </td>    
</tr>

Das heist es muss ja ein Knoten tr, 4 Knoten td und vier Knoten input erzeugt werden mit einem Klick. Ich weis nicht wie ich das anstellen soll.

Habt ihr vieleicht nen Beispiellink wo ich das mal nachlesen kann? Oder selber ein Beispiel? Wie gesagt einen einzelnen Knoten hhinzufügen mit Attributen etc. ist kein Problem, nur das verschatelte auf einen Klick ist für mich ein Problem das ich auch nicht wies wie ich ansetzen soll.

Danke für eure Hilfe Gruß Litter

ChrisB · 20.12.2010, 17:21

Wo ist das Problem ...?

Du erstellst ein TR-Element.
Dann erstellst du ein TD-Element - und hängst dieses ins TR rein.
Dann erstellst du ein INPUT-Element - und ...

Und am Ende nimmst du das TR, und hängst es in den bereits im DOM befindlichen Knoten rein, wo's hin soll.

Chriz · 21.12.2010, 09:59

jQuery ....

Code:

$('<tr>
    <td>
        <input type="text" name="ein_name" class="css_class">
    </td>
    <td>
        <input type="text" name="ein_name" class="css_class">
    </td>
    <td>
        <input type="text" name="ein_name" class="css_class">
    </td>
    <td>
        <input type="text" name="ein_name" class="css_class">
    </td>    
</tr>').appendTo('table#tableId');

rudygotya · 21.12.2010, 12:16

Alternativ per innerHTML oder per js template engine.

litterauspirna · 22.12.2010, 17:20

Hallo,

bitte entschuldigt das ich erst jetzt hier wieder antworte, aber ging nicht eher. Ich habe das Problem selber lösen können bevor hier eure Antworten kamen, ich hatte so etwas schon mal mit PHP DOM gemacht und hatte das nun auf meiner Platte wieder gefunden und da wusste ich was ich machen musste.

Ich habs mit dem Javascript noch nicht ganz so, ich tue mich da etwas schwer mit.

@Chriz
deine Tipps mit JQuery sind schön und gut, nur will ich mich mit JQuery erst auseinandersetzen wenn ich wenigstens Grundlagen Javascript sicher drauf habe, denn ich finde nur dann macht es wirklich Sinn das anzuwenden. Ist nicht böse gemeint.

Gruß Litter

Ist wie gesagt nur ein Übungsbeispiel, aber falls es mal jemand brauchen kann hier der Code dafür.

Code:

<html>
<head>
    
    <script type="text/javascript">
        
        var newTableLine = function ( idTable ) {
            
            var newTr = document.createElement( "tr" );
            document.getElementById( idTable ).appendChild( newTr );
            
            for ( var i = 0; i < 4; i++ ) {
                
                var newTd = document.createElement( "td" );
                newTr.appendChild( newTd );
                
                var newInputField = document.createElement( "input" );
                newTd.appendChild( newInputField );
                
                newInputField.setAttribute( "type", "text" );
                newInputField.setAttribute( "name", "value_" + i + "[]" );
            }
        }
        
    </script>
    
</head>
<body>
<p>
    <a href="#" onclick="newTableLine( 'formTable' )">New Table Line</a>
</p>
<div>
    <table id="formTable" cellspacing="2" cellpadding="2" width="50%" border="0">
    <tr id="sendLine">
        <td colspan="4">
            <input type="submit" name="send" value="senden">
        </td>
    </tr>
    </table>
</div>

</body>
</html>

ChrisB · 22.12.2010, 17:30

Genau so, wie du es jetzt machst, sollte man es aus Performance-Gründen aber nicht machen.

Besser: TR erzeugen, aber noch nicht ins DOM einhängen.
TD, ..., erzeugen und ins TR einhängen.
Erst anschließend das TR ins DOM einhängen - dann braucht der Browser letzteres nur einmal zu updaten, und nicht jedes Mal bei der Erzeugung jedes einzelnen Nachfolgeknotens.

Und bspw. wenn man nicht nur ein Eltern-Element dynamisch erzeugt, sondern mehrere, die anschließend parallel im DOM landen sollen - dann kann man sich eines DocumentFragment bedienen, um die auch gleich alle „in einem Rutsch“ einzufügen.

litterauspirna · 22.12.2010, 17:38

@ Chris

ich bin noch ziemlich am Anfang was Javascript angeht und kann teilweise das was du da schreibst nicht wirklich nachvollziehen, tut mir leid. Wenn du eventuell ein kleines Codebeispiel hast das ich mal den Unterschied zu meinem Code sehen kann, dann kann ich das besser nachvollziehen, nur wenns kein Problem ist. Ich will ja keinen Code weil ich mir selber kein Kopf drüber machen will, sondern um eben nachvollziehen zu können was du da meinst. Oder du hast eventuell ne Quelle zum nachlesen, dass wäre auch gut.

Vielen Dank

ChrisB · 22.12.2010, 17:46

Code:

document.getElementById( idTable ).appendChild( newTr );

Das ist in dem Fall das Einhängen ins DOM, von dem ich rede - die Tabelle befindet sich schließlich schon im DOM, also landet die neue TR auch direkt im DOM mit dieser Zeile - der Browser muss sie sofort „live“ einbauen, muss also danach schauen, was sich dadurch alles ändert, ob er das Dokument neu rendern muss, ...

Deshalb sollte man das eben nicht sofort machen, sondern das TR-Element zuerst aus dem DOM heraus halten, alle neu zu erzeugenden Nachfahren-Knoten in dieses TR einhängen - und erst anschließend das TR ins DOM hängen.

Also kurz, diese Zeile ans Ende verschieben, hinter die Schleife.

litterauspirna · 22.12.2010, 17:51

Ok vielen Dank nun habe ich auch begriffen was du damit meinst.

Dann ein schönes Fest allen und noch mal danke für deine Erklärung.

Gruß Litter

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Array Element zwischen zwei andere einfügen	Ti-Systems	PHP Tipps 2009	6	19.09.2009 18:01
Login.php in index.html einfügen - Fehler!?	bayway	HTML, Usability und Barrierefreiheit	6	10.09.2009 22:50
Text in textarea in anderer Datei einfügen	emasch	JavaScript, Ajax und mehr	13	25.08.2009 21:52
eine Datei per include einfügen, aber an verschiedenen Stellen ausgeben	InsaneSimon	PHP Tipps 2008	11	24.09.2008 21:15
SOAP Webservice mit Dokument in der Response	phpBone	PHP-Fortgeschrittene	9	04.09.2008 23:16
In Dokument einfügen	Kein Genie	HTML, Usability und Barrierefreiheit	9	15.11.2006 00:41
Text mit Javascript in Textarea einfügen	kiffy	HTML, Usability und Barrierefreiheit	2	02.04.2006 20:35
phpmyadmin - textdatei einfügen	rocco	Datenbanken	6	08.06.2005 13:20
[Erledigt] Wert einfügen		HTML, Usability und Barrierefreiheit	0	17.05.2005 22:53
Text per Klick in Textarea einfügen Abhängig von Radiobutton	18inch	HTML, Usability und Barrierefreiheit	1	09.05.2005 11:22
XML Dokument speichern/überschreiben		HTML, Usability und Barrierefreiheit	2	24.01.2005 09:52
String an bestimmter Stelle einfügen		PHP Tipps 2005	1	14.01.2005 11:38
[Erledigt] Liste in Textarea einfügen		HTML, Usability und Barrierefreiheit	0	03.01.2005 19:16
resultausgabe mit while schleife in pdf dokument		PHP Tipps 2004	2	23.09.2004 14:56
array_push nur in begrenzter Anzahl ausführen ?		PHP Tipps 2004	2	07.09.2004 09:05

20.12.2010, 16:14
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	[Erledigt] verschachtelte nodes via DOM ins Dokument einfügen Hallo Leute, wie auf einfache Art und Weise Nodes in ein Dokument via DOM Manipulation einfügen kann weiß ich ja und habe ich auch schon paar mal gemacht. Aber wie kann ich das erreichen das ich so etwas dann via DOM Scripting hinzufügen kann, also verschachtelte Nodes auf einen Klick. Es soll dann beim Klick auf einen Link so etwas heraus kommen. Code: <tr> <td> <input type="text" name="ein_name" class="css_class"> </td> <td> <input type="text" name="ein_name" class="css_class"> </td> <td> <input type="text" name="ein_name" class="css_class"> </td> <td> <input type="text" name="ein_name" class="css_class"> </td> </tr> Das heist es muss ja ein Knoten tr, 4 Knoten td und vier Knoten input erzeugt werden mit einem Klick. Ich weis nicht wie ich das anstellen soll. Habt ihr vieleicht nen Beispiellink wo ich das mal nachlesen kann? Oder selber ein Beispiel? Wie gesagt einen einzelnen Knoten hhinzufügen mit Attributen etc. ist kein Problem, nur das verschatelte auf einen Klick ist für mich ein Problem das ich auch nicht wies wie ich ansetzen soll. Danke für eure Hilfe Gruß Litter __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

20.12.2010, 17:21
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Wo ist das Problem ...? Du erstellst ein TR-Element. Dann erstellst du ein TD-Element - und hängst dieses ins TR rein. Dann erstellst du ein INPUT-Element - und ... Und am Ende nimmst du das TR, und hängst es in den bereits im DOM befindlichen Knoten rein, wo's hin soll. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

21.12.2010, 12:16
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Alternativ per innerHTML oder per js template engine. __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

22.12.2010, 17:20
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	Hallo, bitte entschuldigt das ich erst jetzt hier wieder antworte, aber ging nicht eher. Ich habe das Problem selber lösen können bevor hier eure Antworten kamen, ich hatte so etwas schon mal mit PHP DOM gemacht und hatte das nun auf meiner Platte wieder gefunden und da wusste ich was ich machen musste. Ich habs mit dem Javascript noch nicht ganz so, ich tue mich da etwas schwer mit. @Chriz deine Tipps mit JQuery sind schön und gut, nur will ich mich mit JQuery erst auseinandersetzen wenn ich wenigstens Grundlagen Javascript sicher drauf habe, denn ich finde nur dann macht es wirklich Sinn das anzuwenden. Ist nicht böse gemeint. Gruß Litter Ist wie gesagt nur ein Übungsbeispiel, aber falls es mal jemand brauchen kann hier der Code dafür. Code: <html> <head> <script type="text/javascript"> var newTableLine = function ( idTable ) { var newTr = document.createElement( "tr" ); document.getElementById( idTable ).appendChild( newTr ); for ( var i = 0; i < 4; i++ ) { var newTd = document.createElement( "td" ); newTr.appendChild( newTd ); var newInputField = document.createElement( "input" ); newTd.appendChild( newInputField ); newInputField.setAttribute( "type", "text" ); newInputField.setAttribute( "name", "value_" + i + "[]" ); } } </script> </head> <body> <p> <a href="#" onclick="newTableLine( 'formTable' )">New Table Line</a> </p> <div> <table id="formTable" cellspacing="2" cellpadding="2" width="50%" border="0"> <tr id="sendLine"> <td colspan="4"> <input type="submit" name="send" value="senden"> </td> </tr> </table> </div> </body> </html> __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de

22.12.2010, 17:30
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Genau so, wie du es jetzt machst, sollte man es aus Performance-Gründen aber nicht machen. Besser: TR erzeugen, aber noch nicht ins DOM einhängen. TD, ..., erzeugen und ins TR einhängen. Erst anschließend das TR ins DOM einhängen - dann braucht der Browser letzteres nur einmal zu updaten, und nicht jedes Mal bei der Erzeugung jedes einzelnen Nachfolgeknotens. Und bspw. wenn man nicht nur ein Eltern-Element dynamisch erzeugt, sondern mehrere, die anschließend parallel im DOM landen sollen - dann kann man sich eines DocumentFragment bedienen, um die auch gleich alle „in einem Rutsch“ einzufügen. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

22.12.2010, 17:38
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	@ Chris ich bin noch ziemlich am Anfang was Javascript angeht und kann teilweise das was du da schreibst nicht wirklich nachvollziehen, tut mir leid. Wenn du eventuell ein kleines Codebeispiel hast das ich mal den Unterschied zu meinem Code sehen kann, dann kann ich das besser nachvollziehen, nur wenns kein Problem ist. Ich will ja keinen Code weil ich mir selber kein Kopf drüber machen will, sondern um eben nachvollziehen zu können was du da meinst. Oder du hast eventuell ne Quelle zum nachlesen, dass wäre auch gut. Vielen Dank __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de

22.12.2010, 17:46
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Code: document.getElementById( idTable ).appendChild( newTr ); Das ist in dem Fall das Einhängen ins DOM, von dem ich rede - die Tabelle befindet sich schließlich schon im DOM, also landet die neue TR auch direkt im DOM mit dieser Zeile - der Browser muss sie sofort „live“ einbauen, muss also danach schauen, was sich dadurch alles ändert, ob er das Dokument neu rendern muss, ... Deshalb sollte man das eben nicht sofort machen, sondern das TR-Element zuerst aus dem DOM heraus halten, alle neu zu erzeugenden Nachfahren-Knoten in dieses TR einhängen - und erst anschließend das TR ins DOM hängen. Also kurz, diese Zeile ans Ende verschieben, hinter die Schleife. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

22.12.2010, 17:51
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	Ok vielen Dank nun habe ich auch begriffen was du damit meinst. Dann ein schönes Fest allen und noch mal danke für deine Erklärung. Gruß Litter __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de