Restoring/Undoing innerHTML

[CoBfan1987]

Right now I have a function that changes table cells using innerHTML when a link is clicked

Is there a way that I could revert/undo the table cells back to their original content?

[tirna]

One way of doing it is:

1) In the function that changes the content of a <td>, add the current contents of the <td> to the end of one javascript array and the id of <td> to the end of another array.

2) When you click the 'undo' button, run a function that starts at the end of each array and writes the contents of the last id back to the original <td> using the info in the two arrays. Then delete the last element in each array.

You could also use a 2 dimensional single array to do the same thing.

[MrRed]

possibly the quickest wheeze is to save the whole of the innerHTML in a variable just before you change anything and re-instate when reverting. It would do one level of undo and you could easily conceive of multiple undos with an array, but how big is the page? I have no problem with 50K pages.

I parse the contents of innerHTML in a variable looking for TAGs etc to arrays sometimes. If you have the whole innerHTML in a variable it is another way of searching for things. Horses for courses and all that.

[CoBfan1987]

I'm still fairly new at javascript here.

Could one of you post a code that might work for what you suggest?

Based on the first response in the thread I came up with this code.

function getCurrent(){
	var tableRows = document.getElementById('myTable').rows;
	var rows = document.getElementById('myTable').getElementsByTagName('tr');
	var numRows = rows.length - 1;
	var contentArray = new Array();
	var i = 0;
	while(i<=numRows){
		var z = tableRows[i].cells; //I'm sure there must be a different way to do this part in the while statement to be more dynamic.
		contentArray.push(z[0].innerHTML);
		contentArray.push(z[1].innerHTML);
		contentArray.push(z[2].innerHTML);
		i++;
	}
	document.write(contentArray);//Just to see what the array is.
}

I'm sure there must be a more efficient way to do this.
The table on each page can have up to 20 rows and between 3-5 cells per row.

[Kor]

I'm sure there must be a more efficient way to do this.

No. Except that you should make your array as a global variable (ideal would be a constant, but IE does not handle it). and call your function onload.

[MrRed]

the kind of thing I was thinking of would be:

var fred = new Array(10); // 10 levels of undo place it in base level of script
var levl = 0; // set the first level of the undo 

function doThis(foo, joo, etc){
// before doing anything
fred[levl] = document.innerHTML;
if(levl<10)levl = levl+1; //limit at 9 (= 10 levels)

// your code here
}

function undoThis(){
if(levl>0)levl = levl-1; // limit at 0!!
document.innerHTML=fred[levl]; // re-instate previous page.
}

Not tried but it looks OK to me. As long as you don't run out of RAM. Putting a limit on the levels is advisable just in case you hit a problem that isn't obvious immediately.
Just a thought - are you using frames? in which case self.document.innerHTML might be advisable. Not essential but it focuses the mind on the potential for confusion.

[MrRed]

AH! might only be 9 levels - if you think it through.

[CoBfan1987]

I don't understand the levels thing, I haven't seen that yet before with arrays.

[MrRed]

levels refer to levels of undo.
The array has 10 elements, but unless you do some scripted checking you have to ensure you don't try to add to a non-existent array location. It may just increase the size of the array, but without running the script (I am not at my machine) I can't tell, and browsers differ.

Another improvement would be to clear the contents of the last array location when you don't need it, just to keep the whole thing clean and not using too much RAM. Unless you wanted to add a feature of "re-do" which is another function again.

function undoThis(){
if(levl>0)levl = levl-1; // limit at 0!!
document.innerHTML=fred[levl]; // re-instate previous page.
fred[levl] = ""; // clear undo text now it is not required.
}