Row mit insertBefore vor erste Zeile

Lightware · 01.03.2011, 10:02

Hi,

ich bin am verzweifeln.
Mein Ziel:

-> Ich möchte bei einem Buttonklick eine neue Tabellenzeile nach der ersten <tr></tr> einfügen

Tabelle:

Code:

<html>
<head>
<script type="text/javascript">
function insert(){
    var tr = document.createElement("tr");
						
    var td1 = document.createElement("td");
    td1.innerHTML = '1';
    var td2 = document.createElement("td");
    td2.innerHTML = 'a';

     tr.appendChild(td1);
     tr.appendChild(td2);

     //childNodes[0] wegen tbody
     document.getElementById('tab').childNodes[0].insertBefore(tr, document.getElementById('tab').childNodes[0].childNodes[1]);
}
</script>
</head>
<body>
<table id="tab">
   <tr><th>Num</th><th>test</th></tr>

   <tr><td>2</td><td>b</td></tr>
   <tr><td>3</td><td>c</td></tr>
</table>
<button onclick="insert();">Einfügen</button>
</body>
</html>

Mit diesem JS-Code hab ichs es schonmal geschafft:

Code:

var tr = document.createElement("tr");
						
var td1 = document.createElement("td");
td1.innerHTML = '1';
var td2 = document.createElement("td");
td2.innerHTML = 'a';

tr.appendChild(td1);
tr.appendChild(td2);

//childNodes[0] wegen tbody
document.getElementById('tab').childNodes[0].insertBefore(tr, document.getElementById('tab').childNodes[0].childNodes[1]);

Ich habe es schonmal geschaft, aber wenn ich die gleiche Lösung jetzt verwende, funktioniert diese nicht.
Habe auf Doctype, verwendete Libs (Prototype) geachtet, aber ich kann es nicht mehr nachbauen, es funktioniert einfach nicht.

Ich weis echt nicht mehr weiter, da ich mit den ChildNodes wirklich fast alles erdenkliche ausprobiert hab -> 0 durch 1 ersetzt, vertauscht, mit firstChild und lastChild sowie parentNode rumgespielt.

Das scheint ein echtes Problem zu sein, da im Netz wenig dazu steht, bzw. die Lösungen nicht funktionieren.

Ich danke euch!

Grüße

BlackScorp · 01.03.2011, 10:05

also so wie ich das sehe, willst du weitere Tabs hinzufügen.. schau mal hier

http://jqueryui.com/demos/tabs/#manipulation

MFG

Lightware · 01.03.2011, 10:44

Ich möchte einfach nur eine <tr><td></td><td></td></tr> Struktur nach dem ersten auftreten von TR in der Tabelle, also nach <tr><th></th><th></th></tr> einfügen.

Geht das nur über jQuery/Scriptaculous Libs?

G

BlackScorp · 01.03.2011, 10:53

nein es gibt auch eine JS methode die schimpft sich appendChild()

Chriz · 01.03.2011, 11:02

Hallo, mach es dir doch einfach und nutz die volle <table>-Syntax in HTML aus:

<thead> für Tabellenheader, <tbody> für den Tabellenrumpf. Sofern ich deine Tabellenstruktur richtig interpretiert habe.

Dann kannst du tbody.firstChild.insertBefore nutzen, allerdings nur, wenn <tbody> bereits Inhalt hat. Wenn nicht reicht ein appendChild. Mit jQuery natürlich sehr einfach umzusetzen.

Lightware · 01.03.2011, 11:50

Hi,

meinst du so:

Zitat:

<html>
<head>
<script type="text/javascript">
function insert(){
var tr = document.createElement("tr");

var td1 = document.createElement("td");
td1.innerHTML = '1';
var td2 = document.createElement("td");
td2.innerHTML = 'a';

tr.appendChild(td1);
tr.appendChild(td2);

//childNodes[0] wegen tbody
document.getElementById('tab').tbody.firstChild.in sertBefore(tr, document.getElementById('tab').tbody.firstChild);
}
</script>
</head>
<body>
<table id="tab">
<thead>
<tr><th>Num</th><th>test</th></tr>
</thead>
<tbody>
<tr><td>2</td><td>b</td></tr>
<tr><td>3</td><td>c</td></tr>
</tbody>
</table>
<button onclick="insert();">Einfügen</button>
</body>
</html>

Wäre das so korrekt?

BlackScorp · 01.03.2011, 12:04

wenn es so korrekt wäre, dann würde es laufen. Probier es so:

PHP-Code:

  <html>

    <head>

 
    </head>

    <body>

        <script type="text/javascript">

            function insert(){

                var tr = document.createElement("tr");

 
                var td1 = document.createElement("td");

                td1.innerHTML = '1';

                var td2 = document.createElement("td");

                td2.innerHTML = 'a';

 
                tr.appendChild(td1);

                tr.appendChild(td2);

                document.getElementById('tab').getElementsByTagName('tbody')[0].appendChild(tr);

             

            }

        </script>

        <table id="tab">

            <thead>

                <tr><th>Num</th><th>test</th></tr>

            </thead>

            <tbody>

                <tr><td>2</td><td>b</td></tr>

                <tr><td>3</td><td>c</td></tr>

            </tbody>

        </table>

        <button onclick="javascript:insert()">Einfügen</button>

    </body>

</html>

Chriz · 01.03.2011, 12:24

appendChild() ist meines Wissens falsch, er will ja ein prepend.

Lightware · 01.03.2011, 12:25

Hi Scorp,

ich kenne appendChild, mit dem ist das alles kein Problem.
Ich möchte aber immer in die erste Zeile die Row hinzufügen, nicht einfach an die vorhandenen dranhängen.

Danke und Gruß
LW

EDIT: Chriz sagt es.

Chriz · 01.03.2011, 12:42

Dann wie gesagt prüfen, ob <tbody> Zeilen enthällt, wenn ja auf tbody ein firstChild.insertBefore, sonst appendChild. Manche Browser fügen TextContent als Nodes hinzu, also Whitespace. Daher -> Framework benutzen!

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
[Erledigt] Felder einer Zeile vergleichen und auswerten	lobba	Datenbanken	6	10.01.2011 23:14
[Erledigt] Problem mit Zeile löschen Tabelle Javascript	nBassCom	JavaScript, Ajax und mehr	2	02.06.2010 14:36
[Erledigt] txt - bestimmte zeile elsen und schreiben	mcsebbi	PHP Tipps 2010	17	02.03.2010 21:32
String Zeile für Zeile kürzen	fdm	PHP Tipps 2009	5	08.03.2009 22:18
[Erledigt] Erste Zeile einfügen oder löschen in csv	solvero	PHP Tipps 2009	6	08.03.2009 21:43
Lange Zahlenkombination in kurze Zeichenfolge umwandeln	Heinerlutscher	PHP-Fortgeschrittene	27	28.02.2009 16:45
[Erledigt] 'upload-Datei' Zeile für Zeile auslesen	Felix	PHP Tipps 2008	18	29.06.2008 02:55
__LINE__: Falsche Zeile	Jacks Rache	PHP Tipps 2006	5	10.06.2006 20:20
Zeile einfügen	tennessee	Server, Hosting und Workstations	5	02.06.2006 21:05
[Erledigt] Einzelne Zeile löschen		PHP Tipps 2005-2	3	18.08.2005 14:03
[Erledigt] Jede 2. Zeile eine andere Farbe.	Clan-Opa	PHP Tipps 2004-2	1	26.11.2004 09:00
durchlauf,zeile für zeile + update	Skazi	Datenbanken	10	25.11.2004 13:59
[Erledigt] Problem mit einer Website		PHP Tipps 2004	12	06.08.2004 10:34
[Erledigt] Funktion MAIL() funkt nicht		PHP Tipps 2004	16	11.07.2004 17:25


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

01.03.2011, 10:05
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	also so wie ich das sehe, willst du weitere Tabs hinzufügen.. schau mal hier http://jqueryui.com/demos/tabs/#manipulation MFG __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

01.03.2011, 10:44
Lightware Erfahrener Benutzer Registriert seit: 18.08.2008 Beiträge: 131 PHP-Kenntnisse: Fortgeschritten	Ich möchte einfach nur eine <tr><td></td><td></td></tr> Struktur nach dem ersten auftreten von TR in der Tabelle, also nach <tr><th></th><th></th></tr> einfügen. Geht das nur über jQuery/Scriptaculous Libs? G

01.03.2011, 10:53
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	nein es gibt auch eine JS methode die schimpft sich appendChild() __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

01.03.2011, 11:02
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Hallo, mach es dir doch einfach und nutz die volle <table>-Syntax in HTML aus: <thead> für Tabellenheader, <tbody> für den Tabellenrumpf. Sofern ich deine Tabellenstruktur richtig interpretiert habe. Dann kannst du tbody.firstChild.insertBefore nutzen, allerdings nur, wenn <tbody> bereits Inhalt hat. Wenn nicht reicht ein appendChild. Mit jQuery natürlich sehr einfach umzusetzen. __________________ "Nuschel ich?" - "Was?"

01.03.2011, 12:04
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	wenn es so korrekt wäre, dann würde es laufen. Probier es so: PHP-Code: <html> <head> </head> <body> <script type="text/javascript"> function insert(){ var tr = document.createElement("tr"); var td1 = document.createElement("td"); td1.innerHTML = '1'; var td2 = document.createElement("td"); td2.innerHTML = 'a'; tr.appendChild(td1); tr.appendChild(td2); document.getElementById('tab').getElementsByTagName('tbody')[0].appendChild(tr); } </script> <table id="tab"> <thead> <tr><th>Num</th><th>test</th></tr> </thead> <tbody> <tr><td>2</td><td>b</td></tr> <tr><td>3</td><td>c</td></tr> </tbody> </table> <button onclick="javascript:insert()">Einfügen</button> </body> </html> __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

01.03.2011, 12:24
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	appendChild() ist meines Wissens falsch, er will ja ein prepend. __________________ "Nuschel ich?" - "Was?"

01.03.2011, 12:25
Lightware Erfahrener Benutzer Registriert seit: 18.08.2008 Beiträge: 131 PHP-Kenntnisse: Fortgeschritten	Hi Scorp, ich kenne appendChild, mit dem ist das alles kein Problem. Ich möchte aber immer in die erste Zeile die Row hinzufügen, nicht einfach an die vorhandenen dranhängen. Danke und Gruß LW EDIT: Chriz sagt es. Geändert von Lightware (01.03.2011 um 12:29 Uhr).

01.03.2011, 12:42
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Dann wie gesagt prüfen, ob <tbody> Zeilen enthällt, wenn ja auf tbody ein firstChild.insertBefore, sonst appendChild. Manche Browser fügen TextContent als Nodes hinzu, also Whitespace. Daher -> Framework benutzen! __________________ "Nuschel ich?" - "Was?"