Greasemonkey - Zeile in Tabelle einfügen

Wyqer · 05.09.2011, 10:40

Hallo werte PHP.de Community,

ich fange gerade an mich mit Greasemonkey zu beschäftigen und probiere einfach ein wenig rum.

Ich würde gerne in eine existierende Tabelle eine weitere Zeile einfügen, doch leider passiert garnichts. Und da ich nun schon eine ganze Weile über Goolge nach "Greasemonkey tr einfügen" u.ä. suche und nichts gefunden habe, was mich weitergebracht hat, würde ich die Frage gerne an euch stellen.

Ich hoffe, dass mich jemand auf den Fehler hinweisen kann, so dass ich entsprechend weiter vorankomme.

Ich danke bereits jetzt für eure Hilfe.

Hier die Codes:

HTML Seite:

Code:

<div id='test'>

<table>

<tr><td>1</td><td>1</td></tr>
<tr><td>2</td><td>2</td></tr>
<tr><td>3</td><td>3</td></tr>
<tr><td>5</td><td>5</td></tr>
<tr><td>6</td><td>6</td></tr>

</table>

</div>

Und hier der Code aus dem Greasemonkey Script:

Code:

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

var td1 = document.createElement("TD");
td1.appendChild(document.createTextNode("4"));

var td2 = document.createElement("TD");
td2.appendChild(document.createTextNode("4"));

row.appendChild(td1);
row.appendChild(td2);

document.getElementById("test").insertBefore(row, document.document.getElementsByTagName("TR")[3].nextSibling);

Beste Grüße
Wyqer

fab · 05.09.2011, 11:01

Zitat:

Zitat von Wyqer

Und da ich nun schon eine ganze Weile über Goolge nach "Greasemonkey tr einfügen" u.ä. suche und nichts gefunden habe, was mich weitergebracht hat, würde ich die Frage gerne an euch stellen.

Ein Tipp dazu: Mit Greasemonkey hat dein Problem erstmal gar nichts zu tun, eine Suche nach "javascript insert table row" würde dir mit Sicherheit besser helfen.

Auf den ersten Blick fällt mir auf:
- einige Operationen funktionieren nicht bevor das Element im DOM-Baum eingefügt ist, IIRC musst du zuerst die neue Zeile einfügen und dann deren Unterelemente erzeugen
- document.document gibt es nicht
- du benutzt anscheinend weder Debugger noch Fehlerkonsole

Vielleicht hilfreich:
http://de.selfhtml.org/javascript/ob...m#append_child

Manko10 · 05.09.2011, 11:03

Hi, das ist kein Greasemonkey-Problem, sondern ein allgemeines JavaScript-Problem.

Zitat:

document.getElementById("test").insertBefore(row, document.document.getElementsByTagName("TR")[3].nextSibling);

ergibt überhaupt keinen Sinn. Da sind gleich mehrere Fehler drinnen.
a) musst du du als Referenz-Knoten das Parent-Element angeben, nicht bloß irgend ein übergeordnetes.
b) ist document.document ein Fehler
c) bezieht sich nextSibling in deinem Fall auf White-Space-Knoten, nämlich auf den Zeilenumbruch nach dem TR (gut, ist Wurst, aber was soll das?).

Als Referenzknoten solltest du denselben Knoten nehmen, den du als zweites Argument an insertBefore gibst mit der Eigenschaft parentNode versehen. Dazu solltest du statt document.getElementsByTagName("TR")[3].nextSibling einfach document.getElementsByTagName("TR")[4] nehmen.
Also

Code:

document.getElementsByTagName("TR")[4].parentNode.insertBefore(row, document.getElementsByTagName("TR")[4]);

Im Übrigen verstehe ich nicht, warum du die Element-Namen manchmal groß- und manchmal kleinschreibst.

Statt td1.appendChild(document.createTextNode("4")); empfehle ich übrigens td1.innerHTML = '4'; Ist weniger fehleranfällig.

Wyqer · 05.09.2011, 11:38

vielen Dank für die schnelle Hilfe.

Das mit dem doppelten document hätte man auch einfach mal sehen können, aber manchmal sieht man den Wald eben vor lauter Bäumen nicht.

Der Code ist nun wie folgt und funktioniert:

Code:

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

var td1 = document.createElement("td");
td1.innerHTML = '4';

var td2 = document.createElement("td");
td2.innerHTML = '4';

row.appendChild(td1);
row.appendChild(td2);

document.getElementsByTagName("TR")[4].parentNode.insertBefore(row, document.getElementsByTagName("TR")[3]);

wenn ich beim insert TR 4 nehme, setzt er es allerdings nach den 4ten und nicht davor. Nehme ich 3, klappt es wie gewünscht.

Also vielen dank nochmal und es war ja wirklich eine Sache irgendwie, die man einfach hätte bemerken müssen.

ChrisB · 05.09.2011, 12:29

Zitat:

Zitat von fab

einige Operationen funktionieren nicht bevor das Element im DOM-Baum eingefügt ist, IIRC musst du zuerst die neue Zeile einfügen und dann deren Unterelemente erzeugen

Nein, im Gegenteil - bei aufwendigeren Operationen ist es sogar allgemein empfehlenswert, diese erst „außerhalb“ des DOM zu komplettieren, und erst anschließend ins DOM einzuhängen.
Das ist nämlich meistens schneller, weil der Browser das dann „in einem Rutsch“ verarbeitet, während das Hinzufügen Stück-für-Stück zwischendurch immer wieder eine Aktualisierung der Darstellung erzwingt (egal, ob diese für den Nutzer sichtbar sind oder nicht), Stichworte Repaint/Reflow.

Lediglich wenn es darum geht, effektive Styles abzufragen, muss man ein Element ggf. vorher schon ins DOM eingehängt haben - bspw. wie breit ein DIV-Element ist, kann ja erst gesagt werden, wenn es bereits ins Layout eingefügt ist.

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] Problem mit Zeile löschen Tabelle Javascript	nBassCom	JavaScript, Ajax und mehr	2	02.06.2010 14:36
[Erledigt] Intertabellarische Berechnungen, wie?	dave303	Datenbanken	13	05.03.2010 11:58
Zeile einer Tabelle weich ausblenden.	jackie1983	PHP Tipps 2010	4	08.02.2010 16:48
Bilder in Tabelle einfügen Mysql oder direkt?!	DKuhn	PHP Tipps 2009	3	30.09.2009 10:14
[Erledigt] Erste Zeile einfügen oder löschen in csv	solvero	PHP Tipps 2009	6	08.03.2009 21:43
Aus Tabellen Zeile neue Tabelle öffnen im gleichen Fenster	sheekie	PHP Tipps 2008	4	30.10.2008 00:19
Tabelle mit while nach 4 spalten zur nächsten zeile	Supeede	PHP Tipps 2008	6	10.05.2008 09:46
Bild an eine genaue Stelle in einer Tabelle einfügen?!	miwius	PHP Tipps 2008	6	28.10.2007 15:55
Position einer zeile in einer sortierten tabelle bestimmen	Drache	Datenbanken	9	17.06.2007 10:45
Zeile einfügen	tennessee	Server, Hosting und Workstations	5	02.06.2006 21:05
Am Ende jeder Zeile etwas einfügen lassen...		PHP Tipps 2005-2	2	29.10.2005 05:56
[Erledigt] Erste Zeile einer Tabelle wird nicht ausgelesen		Datenbanken	11	18.07.2005 02:18
Zeile einer Tabelle per Mausklick markieren !	Cyberbob_at_tot	HTML, Usability und Barrierefreiheit	2	27.06.2005 15:17
Word Tabelle direkt in HTML Datei einfügen	nsane	HTML, Usability und Barrierefreiheit	7	28.12.2004 09:02

05.09.2011, 10:40
Wyqer Neuer Benutzer Registriert seit: 09.08.2009 Beiträge: 3 PHP-Kenntnisse: Fortgeschritten	Greasemonkey - Zeile in Tabelle einfügen Hallo werte PHP.de Community, ich fange gerade an mich mit Greasemonkey zu beschäftigen und probiere einfach ein wenig rum. Ich würde gerne in eine existierende Tabelle eine weitere Zeile einfügen, doch leider passiert garnichts. Und da ich nun schon eine ganze Weile über Goolge nach "Greasemonkey tr einfügen" u.ä. suche und nichts gefunden habe, was mich weitergebracht hat, würde ich die Frage gerne an euch stellen. Ich hoffe, dass mich jemand auf den Fehler hinweisen kann, so dass ich entsprechend weiter vorankomme. Ich danke bereits jetzt für eure Hilfe. Hier die Codes: HTML Seite: Code: <div id='test'> <table> <tr><td>1</td><td>1</td></tr> <tr><td>2</td><td>2</td></tr> <tr><td>3</td><td>3</td></tr> <tr><td>5</td><td>5</td></tr> <tr><td>6</td><td>6</td></tr> </table> </div> Und hier der Code aus dem Greasemonkey Script: Code: var row = document.createElement("tr"); var td1 = document.createElement("TD"); td1.appendChild(document.createTextNode("4")); var td2 = document.createElement("TD"); td2.appendChild(document.createTextNode("4")); row.appendChild(td1); row.appendChild(td2); document.getElementById("test").insertBefore(row, document.document.getElementsByTagName("TR")[3].nextSibling); Beste Grüße Wyqer Geändert von Wyqer (05.09.2011 um 10:45 Uhr).


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

05.09.2011, 11:38
Wyqer Neuer Benutzer Registriert seit: 09.08.2009 Beiträge: 3 PHP-Kenntnisse: Fortgeschritten	vielen Dank für die schnelle Hilfe. Das mit dem doppelten document hätte man auch einfach mal sehen können, aber manchmal sieht man den Wald eben vor lauter Bäumen nicht. Der Code ist nun wie folgt und funktioniert: Code: var row = document.createElement("tr"); var td1 = document.createElement("td"); td1.innerHTML = '4'; var td2 = document.createElement("td"); td2.innerHTML = '4'; row.appendChild(td1); row.appendChild(td2); document.getElementsByTagName("TR")[4].parentNode.insertBefore(row, document.getElementsByTagName("TR")[3]); wenn ich beim insert TR 4 nehme, setzt er es allerdings nach den 4ten und nicht davor. Nehme ich 3, klappt es wie gewünscht. Also vielen dank nochmal und es war ja wirklich eine Sache irgendwie, die man einfach hätte bemerken müssen.