Question

I have an html table in my webpage. It is filled with information from my database.

It has this structure:

Id- Title –Author
1 – Africa – John Smith
2- Europe- Martin Coole

The table is inside a form and has an “Add More” button.

When you hit that button a modal window shows and you can append another title-author row to the table using:

//inside of the addRow function
    $('#myTable').append(“<tr><td>..”);

The table also has an edit and delete button for each row. The onclick has:

//For the edit button
 editRow(id, value1, value2);
//For the delete button
 deleteRow(id);

And here comes my problem, the ids.

The info coming from the database has a solid id (1 and 2) but how should I deal with the ids of the rows appended with the “Add More” button?

What I have done so far is getting the last id from the database rows and put it in a hidden field in my table then in my js file:

var lastID = $('#lastID').val();
var i = 1;
var newId = parseInt (lastID)+i;

newId is 3 and this is valid if one row is appended but if a second row is appended via the “Add More” button I have 3 in newId again :((

How can I fix this? How can I add consecutive ids to the newly appended rows?

Answer 1

In your function editRow write:

var lastID = $('#lastID').val();

// Do your insertion stuff
// ...

// After insertion, raise lastID by 1
$('#lastID').val(++lastID);