insertBefore Zeile nachträglich einschieben

[Divi]

Hi Leute
Ich versuche gerade eine Tabellenzeile an den Anfang einer Tabelle einzufügen. Das versuche ich hiermit:

t_carrier_tab		= document.getElementById('test_table');
t_carrier		= document.getElementById('test_table_first_tr');

new_row			= document.createElement("tr");
new_first_cell		= document.createElement("td");
new_second_cell		= document.createElement("td");
new_second_cell_content = document.createTextNode('test');
new_second_cell.appendChild(new_second_cell_content);
new_row.appendChild(new_first_cell);
new_row.appendChild(new_second_cell);
alert('test');
t_carrier_tab.insertBefore(new_row, t_carrier);
alert('test1');

Die Ausgabe ist allerdings nur "test" und "test1" wird ohne Fehlermeldung verschluckt.
Wenn ich außerdem aus insertBefore das t_carrier rausnehme, dann wird ein tr-Element HINTER die Tabelle eingefügt. (zumindest laut alert([...].innerHTML)).

Hat jemand eine Idee was ich falsch mache?

 

[Sven Mintel]

Lass dir mal eingangs der Funktion das innerHTML der Tabelle ausgeben...dann siehst du das Problem.

Warum die Browser das so machen, weiss ich nicht, aber die Tabelle enthält ein <tbody>-Element.
t_carrier ist somit kein Kindknoten von <table>, sondern ein Kindknoten von <tbody>, weshalb es nicht funktioniert(eine entsprechende Fehlermeldung gibts natürlich auch...Knoten nicht gefunden).

Lösung:

t_carrier_tab = document.getElementById('test_table').getElementsByTagName('tbody')[0];

Wenns um Tabellen geht, find ich aber die DOM-Methoden recht unpraktisch...beim IE bist du da auch nicht sehr kompatibel zu älteren Version als 6.

JS bietet da im eigenen Sprachumfang mit insertCelll() und insertRow() praktischere Methoden:

t_carrier_tab           = document.getElementById('test_table');
new_row                 = t_carrier_tab.insertRow(0);
new_first_cell          = new_row.insertCell(0);
new_second_cell         = new_row.insertCell(1);
new_second_cell_content = document.createTextNode('test');
new_second_cell.appendChild(new_second_cell_content);

 

[Mik3e]

Hi,

Kurze Frage zu diesem Thema (Sven: dankeschön für die vorherigen Zeilen, sind sehr hilfreich):

Gibts eine "inverse" Methode zu insertRow() bzw. insertCell()?
Also sowas wie removeRow() oder alterRow()? (wurde in selfhtml nicht fündig).

Bsp.:
document.getElementById("testtable").removeRow[0];

Ciao,
Mike

 

[Sven Mintel]

Jo, gibt es, ist relativ gut versteckt bei SelfHTML

deleteRow()

 

[Mik3e]

Ja, hab nach dem Post weitergesucht und bin auch darüber gestolpert..
Kann ich den Zellen eigentlich eine ID (bzw. einen Namen) zuweisen beim Erstellen?

Oder gibt es nur die Möglichkeit die Zellen über den definierten Index anzusprechen.
Also:
new_row = t_carrier_tab.insertRow(0);
-> Index[0]

Danke & Ciao,
Mike

 

[Sven Mintel]

Das Einfügen/Löschen geht nur über den Index.

du kannst dir aber bspw. ne kleine Hilfsfunktion basteln, die den Index einer <tr> mit einer bestimmten id zurückgibt und diese dann als Parameter angeben.

 

[Mik3e]

Geht schon mit dem Index... Nachdem ich die Zellen aber über PHP definiere (anzahl etc.), wäre eine ID "hübscher" gewesen als ein bloser Index (vor allem übersichtlicher).

Danke Dir jedenfalls

 

[Mik3e]

Achja, nochwas...
Indiziert das JS die Zellen selbstständig

Denn wenn ich beispielsweise mehrmals

new_row = t_carrier_tab.insertRow(0);

ausführe, legt er mir die Zellen ohne Runtime Error brav an, obwohl er beim zweiten mal theoretisch schreien müsste, da es diesen Index bereits gibt. (Ansprechen hab ich aber noch nicht versucht).

Ciao,
Mike

 

[Sven Mintel]

insertRow() ersetzt die <tr> nicht, es fügt neue ein....die nachfolgenden verschieben sich im Index also nach hinten.... also ja, die <tr> werden selbständig indiziert, wenn man es so nennen kann.

 

[Mik3e]

Ok, kenn mich aus.. Dankeschön.
Stehe jetzt nur vor dem Problem, dass ich in einer Zelle einen Link anbringen möchte (also eigentlich einen neuen Sub-Knoten von <td> wenn man es genau nimmt).

Das geht mal leider nicht:

new_cell_content = window.opener.document.createTextNode('<a href="#" target="_blank"><strong><?PHP echo $fileAfterUpload['description']?></strong></a>');

Der HTML Codierte Teil wird nicht als HTML Code übernommen (sondern als Plain Text geparsed).

Gibts eine Äquivalent zu createTextNode(), das mir HTML Tags als Inhalt zulässt

Danke & Ciao,
Mike