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 konto.pl which makes the changes persistent using a class CsvTableMaintainer.pm. The data transfer format in both directions is JSON, which is parsed by Prototype on the client, and by an own package MiniJSON.pm 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 http://ruediger-plantiko.net/konto/ for the running example, and http://ruediger-plantiko.blogspot.com/2010/10/tabellenpflege-als-webanwendung.html for a more detailed discussion in German language.
The following parts are reused from other sources, see the links for copyrights:
The Datepicker Control (http://dali.mty.itesm.mx/~hugo/js/datepickercontrol/) for entering a date in the detail block.
Some SAP icons (http://www.sapdesignguild.org/resources/icons_sap/icons_d1_3.htm) for navigation (cancel, new, delete row, undo and save).
The Prototype framework (http://www.prototypejs.org/) which helps me to write readable JavaScript code.