Jquery editable Table - Save content of original rows
Hello People,
I've got the following jquery code:
- function cellsToInput (new_id){
$("#"+new_id+" td").each(function(){
if (($(this).attr("cellIndex") <= 7)||($(this).attr("cellIndex") == 10)) { // Change just first 7 cells into input (rest are hidden buttons and id)
items[headers[$(this).attr("cellIndex")]] = $(this).html(); // putting all values from the row in array i.e. machine => f4f-01
if ($(this).html().length == 0) var length = 5; // sets the input field size shorter of empty ones
else if ($(this).html().length > 35) var length = 35;
else var length = $(this).html().length;
$(this).html("<input type='text' size='"+length+"' value='"+$(this).html()+"'/>"); //Replaces cells with input fields and original values
$("#buttonok"+new_id).css("visibility","visible"); //show OK button
$("#buttoncancel"+new_id).css("visibility","visible"); //show Cancel button
}
});
collection[new_id] = items; //Assign the first array to the row id >>Necessary if user clicks on cancel, and we can reset values
}
Users are able to edit multiple rows at the same time. Let's assume they have changed the values but click on cancel. The rows should be changed back to it's originial state(with original values).
The only way I know to accomplish this is a multidimensional array which saves the row's ids and their values in an array for each individual edited line.
Is there any other way to change the values back to it's original data in case the values were changed but then the user clicked on "cancel" instead of "ok" ?