jquery - The best way to store table data in javascript in case of undo

Question

I have a html table, in which I'm erasing some <td>s and replacing them with <td>Added!</td> with ajax when a certain action is taken, like this:

 tr.find('.td2').replaceWith('<td>'+my_new_data+'</td>');

However, I want to have the option to undo the action and I need to put the original td data back.

I have a few options I know of:

1) Store the original value in an array

I don't know how to do this, however. The following doesn't work:

storedFoodData[id][2] = tr.find('.td2').html();
storedFoodData[id][3] = tr.find('.td3').html();

Uncaught TypeError: Cannot read property '6' of undefined

2) Not replace the original TD, just hide() it and append() a new one after it

The problem here is that I'm not sure I can do this, semantically. It should break the html code if I understand it correctly.

Any ideas how to solve this situation?

Answer 1

You can use html5 data-attributes

Save html() of td in data attribute and mark that td as lastUpdated td by adding a particular class (I am using active class). Later on, if someone clicks undo, retrieve the content from data attribute and put that in html()

  $('.active').removeClass('.active');
    var td = tr.find('.td2');
    td.data('oldData',td.html());
    td.html(my_new_data).addClass('.active');

And on click of undo, use this,

var active = $('.active');
active.html(active.data('oldData'));