Dynamic HTML Table rows added and filled and inserted in to databse

Question

I needed a solution , to implement adding dynamic HTML table rows and filling them with details , the rows should then be added to database on submit. what is the best way to implement this in jsp.The jsp page on load get the data from the database and creates rows, i can edit the row values and it should be updated,also new rows can be inserted in front end page, which should along with updated rows (retrieved from database ),be saved in jsp.

Answer 1

1. client side javascript. functions like add row, remove row, move row up, move row down as required. Elsewhere on SO
2. remember to name the controls that are added uniquely, like name1, name2, name3... Optionally store count of rows in some hidden field which gets updated and submitted along with the form.
3. on the server side use that counter or otherwise loop through all the request variables to find name*, and insert name*, age*, gender* etc. to the database in the loop.

Answer 2

1. Store the data in the table in a javascript multi-dimensional Array object that has one extra column. ex., if the table is 2x2, create a dynamic arrray of size 2x3 (new Array(2,3))

2. use the first cell of every row of the array to store the primary key of each row of the data in the table and the remaining cells of the row to store the actual data as in the html table.

3. when a new row is added to the html table, or any data is updated, update this javascript array accordingly. leave the first column of newly created rows blank to indicate a new row (or fill it with a dummy value to indicate an empty row)

4. Submit this data in the Array to the server code processing it when the submit button is clicked. This can be done in a variety of ways (appending to the query string, creating hidden variables, etc. )

5. on the server-side, process this data - update the records that have the primary key and create new records for the ones without a key.

Answer 3

Unless there is a requirement to allow the user to POST the entire table in one go and be done with it (a "save all changes and close" action), I would suggest that you just update the database on the go (the "ajaxy" way): 1. When adding a row or editing a row, immediately send the row content to the server using an asynchronous javascript call for "update a single row" - this should be fairly easy to handle (see example idea below). 2. When a new row is to be added, the server should return the new row id for the client to store, so that future updates can address that row.

Implement a "save and close" does not entirely contradict this approach: you can have your "save and close" action just wait until all pending updates are committed - have a count that increment for when you start sending a request, and decrement when a response is received. When it gets to zero, your "save" part has completed and you can close the editor.

One way to implement this will be to attach a form to an invisible cell in each row. This form will have a hidden input element for each data item on the row. When the user changes values on the row, mark the row as "dirty" and a short timeout for each row (that gets reset whenever the user edits the same row) will cause the form to be submitted to an iframe. If you want to implement the "Save and close" action, just count the dirty rows.