求一段js撤销操作返回到某事件之前状态的代码

jlaqk 2014-07-15 07:04:24

如果在点按一个按钮激发某事件后，可能发现做错了，这时如果能提供一个撤销按钮，返回到事件之前的状态该如何呢？跪求高手帮忙。
比如在一个div块中有一个table，可能用js在前端做了许多修改添加等工作，但当点按某按钮时可能又会执行一段js，在执行这段js之前，我想做一个备份工作，就是保留div块中所有内容（这些内容是js动态加上的，而不是网页原有的），当撤销时，能把它又原样调出来。





<html>



<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>新建网页 3</title>

</head>



<body>

<div id="div_myTable">

<table id="myTable">

  <tr id="myTH1" > 

  <td > 1</td>

  <td ><input type="text" id="1-1" size="4" /></td>

  <td ><input type="text" id="2-1" size="10" /></td>

  <td ><input type="text" id="3-1" size="10" /></td>

  <td ><input type="text" id="4-1" size="10" /></td>

  <td ><input type="text" id="5-1" size="10" /></td>

  <td ><input type="text" id="6-1" size="10" /></td>

  <td ><input type="text" id="7-1" size="10" /></td>

  <td ><input type="text" id="8-1" size="10" /></td>

  </tr>

</table>

</div>



	<p><input type="button" value="按钮" name="B1" onclick="somedo()"> <input type="reset" value="撤销" name="B2" onclick="redo()"></p>



<!--/////////////////<div id="div_myTable">/////////////////////// -->



</body>



</html>

...全文

869 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

Xiaoxu1224 2017-01-09

打赏
举报

楼主这个问题解决了吗？

jlaqk 2014-07-19

打赏
举报

google浏览器在用cloneNode复制节点时，textarea中内容无法显示，可是在ie等浏览器就显示很好。不知怎么解决

jlaqk 2014-07-16

打赏
举报

忘了复制头了



<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>do undo //当点击do 时 table 添加一行</title>

jlaqk 2014-07-16

打赏
举报

ZuxiangHuang，您好。很感谢深夜答复。今日测试了以下，不知什么原因单击#do1和#undo没反应。在函数中加了一个alert(“ ”)测试都没反应。我对jquery也不是很熟，就引用了jquery-1.9.1.js，应该不是版本问题吧。请再赐教一哈啊


<script language="javascript" src="jquery-1.9.1.js">
</script>
<script>
$("#do1").click(function(){

      var index =  $(this).data("index");
     index  = index  ? index + 1  : 0; //记录次数
      $(this).data("index",index);
    var table = $("#div1").children("talbe");
      $(this).data("table"+index,table[0].clone(true)); //缓存拷贝对象
      
      
     table .append("<tr><td></td></tr>");
});
//回退
$("#undo1").click(function(){
     var index =  $("#do1").data("index");
     if (!index) {
        return; 
     }
    $("#div1").empty().append($("#do1").data("table"+index)); //重新加载缓存的对象
    $("#do1").data("table"+index,"").data("index",index - 1); //把已经回退的对象清空，计数减一，
});

</script>
</head>

<body>
<div id="div1"> <table id="myTable"><tr><td>测试文字</td></tr></table></div>
<span id="do1">do</span> <span id="undo1">undo</span>    //当点击do 时 table 添加一行，在点击之前缓存table对象，
</body>

</html>

Zhang_qiankun 2014-07-16

打赏
举报

笨一点的方法你可以先隐藏一个div内容就是原本div内容最后你撤销的时候把隐藏的div内容在复制给现在div 你可以试试

jlaqk 2014-07-15

打赏
举报

多谢了。明天再详细看一下啊

zuxianghuang 2014-07-15

打赏
举报

可以使用$.data（）方法来实现啊，比如<div id="div1"> <table><tr><td></td></tr></table></div><span id="do1">do</span><span id="undo1">undo</span> 当点击do 时 table 添加一行，在点击之前缓存table对象， $("#do1").click(function(){ var index = $(this).data("index"); index = index ? index + 1 : 0; //记录次数 $(this).data("index",index); var table = $("#div1").children("talbe"); $(this).data(“table”+index,table.clone(true) ); //缓存拷贝对象 table .append("<tr><td></td></tr>"); }); //回退 $("#undo1").click(function(){ var index = $("#do1").data("index"); if (!index) { return; } $("#div1").empty().append($("#do1").data(“table”+index)); //重新加载缓存的对象 $(“#do1”).data(“table”+index,"").data("index",index - 1); //把已经回退的对象清空，计数减一， }); 如果只需要回退最开始，就不需要计数就是了。