www.webdeveloper.com
Results 1 to 9 of 9

Thread: Restoring/Undoing innerHTML

  1. #1
    Join Date
    May 2010
    Posts
    3

    Restoring/Undoing innerHTML

    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?

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    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.

  3. #3
    Join Date
    Feb 2009
    Location
    UK
    Posts
    141
    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.
    Last edited by MrRed; 05-18-2010 at 03:47 AM. Reason: add info

  4. #4
    Join Date
    May 2010
    Posts
    3
    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.

    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.

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by CoBfan1987 View Post
    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.

  6. #6
    Join Date
    Feb 2009
    Location
    UK
    Posts
    141
    the kind of thing I was thinking of would be:
    Code:
    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.

  7. #7
    Join Date
    Feb 2009
    Location
    UK
    Posts
    141
    AH! might only be 9 levels - if you think it through.

  8. #8
    Join Date
    May 2010
    Posts
    3
    I don't understand the levels thing, I haven't seen that yet before with arrays.

  9. #9
    Join Date
    Feb 2009
    Location
    UK
    Posts
    141
    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.
    Code:
    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.
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles