Tabelle mit AJAX bearbeiten: welche Werkzeuge? (HTML, CSS und Javascript)

[thread]2322[/thread]

Tabelle mit AJAX bearbeiten: welche Werkzeuge?

Superfrank

2006-12-30 23:32

User since
2006-09-05
164 Artikel
BenutzerIn
[default_avatar]

Hallo,
ich möchte mich etwas mehr mit AJAX beschäftigen und als erstes Ziel ein Editierprogramm für Konfigurationsdateien schreiben
Ein Perlscript liefert eine Tabelle, und zu jeder Zeile gibt es eine Option "löschen" und "editieren". Klickt man auf "editieren" verwandelt sich die Option auf "Änderung speichern" und aus den Tabellenfeldern sollen dann input-Felder werden, wo man die Einträge dann ändern kann.
Beim Löschen soll die Tabelle dann ohne die gelöschte Zeile neu dargestellt werden.

Nun frage ich mich welche Werkzeuge für sowas am geeignetsten sind, ich habe schon

CPAN:

CGI::Ajax

HTML::Prototype
http://dojotoolkit.org

gefunden und wollte nur fragen was Ihr für sowas benutzen würdet oder ob es noch andere Werkzeuge gibt die geeignet wären.

Grüsse und guten Rutsch!

Frank

MisterL

2006-12-30 23:38

User since
2006-07-05
334 Artikel
BenutzerIn
[default_avatar]

Hallo.

Rein werkzeugmässig könnte man noch über http://script.aculo.us und das Onlinebuch http://www.galileocomputing.de/openbook/javascript_ajax/ nachdenken. Ein Framework wie Catalyst dürfte für sowas wohl eine Nummer zu gross sein....(btw: die Installation desselben unter Windows mit ActivePerl funktioniert doch ohne Probleme :) )

Ich wünsche ebenfalls einen guten Rutsch ;-)

“Perl is the only language that looks the same before and after RSA encryption.”

Superfrank

2007-01-02 13:14

User since
2006-09-05
164 Artikel
BenutzerIn
[default_avatar]

Hallo,
danke für die Links, sehr interessant. Ich kann jetzt schon Zeilen editieren und Änderungen machen, allerdings gelingt es mir nicht eine bestimmte Tabellenzeile zu löschen. Vesucht habe ich es mit

Code: (dl )

document.getElementById('tabellenname').deleteRow('rowid');

wobei jede Zeile eine eigen ID z.B.

Code: (dl )

<TR id="a1row">

hat. Es wird aber immer die erste Tabellenzeile gelöscht und scheinbar nimmt deleteRow als Argument keine ID sondern nur die Zeilennummer :-/
Kann man auf eine Zeile über die ID zugreifen und diese Zeile dann löschen? Fortlaufende Nummerierung der Zeilen habe ich nicht vor.

MfG

Frank

nepos

2007-01-02 13:22

User since
2005-08-17
1420 Artikel
BenutzerIn

deleteRow() will die Zeilennummer. Da musst du dich wohl dann manuelle durch hangeln, um die richtige Zeilennummer zu bekommen.

Superfrank

2007-01-02 13:40

User since
2006-09-05
164 Artikel
BenutzerIn
[default_avatar]

oh mann, is das schlecht..

Ich hab mir jetzt erstmal mit

Code: (dl )

document.getElementById(row).style.display = "none";

beholfen :-D

Grüsse

Frank

nepos

2007-01-02 14:04

User since
2005-08-17
1420 Artikel
BenutzerIn

Ok, hab mich grade bisschen gespielt und eventuell ne Möglichkeit gefunden, wie du das ohne deleteRow() machen kannst. Du hast ja für jede Zeile eine eigene ID. Nun könntest du via removeChild() die entsprechende Zeile löschen:

Code: (dl )

1
2

var tableRow = document.getElementById('a1row');
tableRow.parentNode.removeChild(tableRow);

Du holst dir erst die passende Zeile, dann gehst du mit über die parentNode-Eigenschaft auf tbody und dort sagst du, dass du gerne das Child, das in tableRow vorliegt löschen möchtest.
Habs mal ähnlich in ner kleinen Testseite ausprobiert:

Code: (dl )

  <html>
    <body>
      <table>
        <tr id="row1">
          <td style="background-color: grey;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Zeile 1</td>
        </tr>
        <tr id="row2">
          <td>Zeile 2</td>
        </tr>
      </table>
    </body>
  </html>

Wenn ich auf Zeile 1 klicke, wird diese aus der Tabelle entfernt.

Superfrank

2007-01-02 15:04

User since
2006-09-05
164 Artikel
BenutzerIn
[default_avatar]

Moin Nepos,
das klappt! Vielen Dank für Deine Hilfe!

Grüsse

Frank

nepos

2007-01-02 16:03

User since
2005-08-17
1420 Artikel
BenutzerIn

Freut mich, dass ich helfen konnte :)

View all threads created 2006-12-30 23:32.