How might I add and remove table rows whilst maintaining sequential element IDs?

Question

I am developing the back end of a CMS that I have been working on.

I have a HTML table that I want the user to be able to add and remove rows from. Each row will contain various user inputs (textboxes, checkboxes..). Then when the users has finished it will be saved in the database.

I am wondering what the best way to approach it is.

I guess the table would be something like this:

<table>
<tr>
<td><input name="name_1" type="text" /></td>
<td><input name="address_1" type="text" /></td>
</tr>
<tr>
<td><input name="name_2" type="text" /></td>
<td><input name="address_2" type="text" /></td>
</tr>
<tr>
<td><input name="name_3" type="text" /></td>
<td><input name="address_3" type="text" /></td>
</tr> 
</table>

I am imagining I will have a nightmare of a time with giving each element in each row an id and what happens if the user deletes row 2... all the id's after it will need to be reordered.

How best to add and remove rows and maintain sequential ids using JavaScript?

Answer 1

Give each <tr> a unique id=... attribute, so that you can uniquely identify rows. Then add a column to the table which contains each row's sequential ID. When you need to re-order things because rows have changed, update the column but not the id attribute.

Answer 2

You should use name="address[]" etc. instead. This way, when you post it, the processing file on the server will receive an array containing all the values in the order the corresponding <input />s appeared in the HTML code.

(I know PHP does this automatically: Transform input names ending in [] into arrays. Don't know about other languages)

Answer 3

You don't want to do this. What you want to do is to actually generate a unique ID, something completely and utterly unique on the page, don't try and maintain that ID in the database.

What you should then do, is when the page is submitted, you grab these IDs submitted and then using auto_increment let the database asign the ID. If you need to composite key it, then you can use a composite key.

Then when you load the form again, say for editing, you need to use the new ID from the database.

I implemented something similar using AJAX. I used random.uniqueID( 'prefix_' ) for each of my form elements, then when it is submitted, I assign the auto_increment to the prefix_integer and returned a JSON object. I could then loop over the object and make sure that my form was then up to date with the correct IDs.

It should be really simple when explained like that.

Answer 4

Why do the IDs need to be sequential? Are you not using a JavaScript library such as jQuery which can return a list of rows, from which you can access the Xth row if you need to access that row?

I think you'll run into synchronization problems if you attempt to update IDs iteratively as you remove (or add) a row in the middle of them.

You might consider DouweM's suggestion in the event that you're using a server-side language which can easily build arrays from IDs with [] in them. Another option would be to assign each of them GUIDs for IDs, or their primary keys from the associated rows in your backing database.