Beispiel für eine BeforeImage/AfterImage-Verwaltung mit JavaScript
JavaScript Perl
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Simple web app for table maintenance

This web application provides a simple UI for adding, changing and deleting the rows of a table persistently. The essential idea is to use the HTML table itself to manage the changes (the "after image") that have to be sent to the server when the user hits "save". The values of the cells correspond to the current values of the data as maintained by the user in the current session. To keep track which cells have been changed or which rows have been deleted, the HTML cell and row elements get special CSS classes during the session. This way, no separate data container for the table is needed. The web page itself is used for this.

The application consists of a single web page konto.html, enriched with some JavaScript code in konto.js. Communication with the server is per Ajax, calling a CGI script which makes the changes persistent using a class The data transfer format in both directions is JSON, which is parsed by Prototype on the client, and by an own package on the server.

To keep the example simple, a CSV file is used on server side for storing the data. There are simple scenarios where this kind of data storage is completely sufficient.

See for the running example, and for a more detailed discussion in German language.

Reused parts

The following parts are reused from other sources, see the links for copyrights: