求一段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 作业
写回复
用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); //把已经回退的对象清空,计数减一, }); 如果只需要回退最开始,就不需要计数就是了。

81,122

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧