nicht angemeldet
Variable Tabelle
Hallo,
Worum gehts:
------------
ich habe ein großes Konstrukt, das überarbeitet werden muss da es ob der laufenden Änderungen der letzten Jahre nicht mehr sicher und einfach zu bedienen ist. Nun hätte ich gerne eure Meinungen und Ideen was man komplett anders machen sollte und was passt.
Derzeitige Situation:
---------------------
Siehe: http://www.geocities.com/hollomey/variableListe.html
Ich habe eine großes Javascript-Konstrukt, dass mir basierend auf den in zwei Arrays definierten Werten eine variable Tabelle aufbaut. Variabel deshalb, weil der Benutzer über ein Plus-Icon beliebige neue Einträge hinzufügen kann. Die verschiedenen Spalten der Tabelle können als unterschiedliche Elemente definiert werden (Input-Felder, Comboboxen mit definiertem Wertevorrat, Checkboxen, Textareas, ...).
Technischer Hintergrund:
------------------------
Im Hintergrund läuft das so ab, das ich ein Array habe, dass das Aussehen der Tabelle definiert und ein Array das die aktuellen und gültigen Werte (zB bei Comboboxen) speichert. Fügt der Benutzer nun eine neue Zeile hinzu, werden die soeben eingegeben Werte dem Array hinzugefügt und die ganze Tabelle wird neu gezeichnet. Löschen funktioniert genau so, ausser dass die Einträge eben aus dem Array entfernt werden.
Der Aufbau der ganzen Tabelle läuft im Moment über Inner-HTML. Es wird nur irgendwo in der HTML-Seite markiert, dass hier die Tabelle aufgebaut werden soll. Am Ende der Seite wird dann eine Initialiserungsfunktion aufgerufen, die alle Tabellen erstellt und die Markierung wo die Tabelle entstehen soll mit dem HTML-Code der Tabelle ersetzt.
Anforderungen:
--------------
Das Konstrukt muss mit Javascript umgesetzt werden, der Einsatz irgendeiner Komplett anderen neuwertigen Technologie ist kein Thema. Das Ganze muss unter Internet Explorer 5.5 (und höher) und Netscape Navigator 7.0 (und höher) lauffähig sein. Für beide Browser müssen die selben Funktionen verwendet werden können. Alles doppelt zu programmieren ist keine Option.
Fragen:
-------
-
Ich bin mit dem Inner-HTML nicht so glücklich (weiß zwar nicht genau warum, aber irgendwie ist es mir nicht sympathisch). Wäre es intelligenter den ganzen Aufbau über das DOM-Object zu lösen? Oder gibt es da Probleme weil das nicht alle Browser gleich umsetzen?
-
Gibt es irgendwelche vergleichbaren Konstrukte auf irgendwelchen Javascript-Seiten (so wie zB Komplette Menü-Navigationen) zum runter laden damit ich mir ein paar andere Ideen holen könnte?
-
Sonst irgendwelche Anregungen was man bei so etwas beachten sollte, was noch sinnvoll wäre, etc ..?
Besten Dank für Eure Hilfe falls ihr das Ganze bis hier durchgelesen habt ;-)
lg
Thomas
-
hi,
Fügt der Benutzer nun eine neue Zeile hinzu, werden die soeben eingegeben Werte dem Array hinzugefügt und die ganze Tabelle wird neu gezeichnet. Löschen funktioniert genau so, ausser dass die Einträge eben aus dem Array entfernt werden.
Ungünstig. Wer reißt denn ein ganzes Haus ab, nur weil er eine Wand neu tapezieren möchte?
Erzeuge die neue Zeile dynamisch, und füge sie in die Tabelle an der passenden Position ein.
Löschen analog - Referenz auf jeweilige Zeile besorgen, und diese entfernen.- Ich bin mit dem Inner-HTML nicht so glücklich (weiß zwar nicht genau warum, aber irgendwie ist es mir nicht sympathisch). Wäre es intelligenter den ganzen Aufbau über das DOM-Object zu lösen?
Du kannst natürlich über createElement und appendChild bzw. insertbefore gehen, zum löschen removeChild.
Ashura würde es mir aber vermutlich nicht verzeihen, wenn ich jetzt die Methoden insertRow/deleteRow des table-Objektes unerwähnt ließe :-)
Die wären zum Einfügen/Löschen von Zeilen ebenfalls benutzbar, und das tr-Objekt hat dann nochmal die Methoden insertCell/deleteCell, mit denen Zellen hinzugefügt bzw. entfernt werden können.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
hi,
[...]
Ungünstig. Wer reißt denn ein ganzes Haus ab, nur weil er eine Wand neu tapezieren möchte?
Niemand. Ich könnte jetzt natürlich mit der "Ist nicht auf meinem Mist gewachsen"-Ausrede daher kommen, will ich aber gar nicht (Ups ... bin somit ja schon)
[...]
Du kannst natürlich über createElement und appendChild bzw. insertbefore gehen, zum löschen removeChild.
Ashura würde es mir aber vermutlich nicht verzeihen, wenn ich jetzt die Methoden insertRow/deleteRow des table-Objektes unerwähnt ließe :-)
Die wären zum Einfügen/Löschen von Zeilen ebenfalls benutzbar, und das tr-Objekt hat dann nochmal die Methoden insertCell/deleteCell, mit denen Zellen hinzugefügt bzw. entfernt werden können.Wau, das waren genau die Sachen wonach ich gesucht habe, und auch der Link in deinem anderem Posting schaut sehr viel versprechend aus. Besten Dank!
gruß,
wahsagalg
Thomas -
Hallo wahsaga.
Ashura würde es mir aber vermutlich nicht verzeihen, wenn ich jetzt die Methoden insertRow/deleteRow des table-Objektes unerwähnt ließe :-)
Hehe. Meine Predigen zeigen Wirkung …
Einen schönen Mittwoch noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]
-
P.S.:
Der Artikel Dynamic HTML Tables: Improving Performance vergleicht diverese Ansätze, eine Tabelle neu aufzubauen, hinsichtlich ihrer Performance in verschiedenen Browsern.
Auch wenn es, wie ich schon schrieb, in deinem Falle vermutlich nicht ratsam sein dürfte, die Tabelle jedes mal komplett neu aufzubauen, kannst du daraus ja vielleicht trotzdem ein paar interessante und brauchbare Informationen ziehen, welche Ansätze es generell gibt, und welche Vor-/Nachteile sie jeweils haben können.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }