模拟在线编辑与保存
想要以下效果吗，在线编辑，编辑完成保存
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>Document</title> 10 11 <style> 12 .outer {width:400px;height:20px;border:1px dashed gray;margin:5px;} 13 .A {float:left;width:300px;} 14 .save {float:right;width:50px;color:blue;} 15 .new {width:40px;height:20px;background:green;color:white;margin-left:350px;} 16 </style> 17 </head> 18 <body> 19 <div class="inn"> 20 <div class="outer"> 21 <div class="A">这是第一条</div> 22 <div class="save" onclick="fn(this)">修改</div> 23 </div> 24 <div class="outer"> 25 <div class="A">这是第二条</div> 26 <div class="save" onclick="fn(this)">修改</div> 27 </div> 28 </div> 29 <div class="new" onclick="new1()">新增</div> 30 <script> 31 32 function fn(e){ 33 var cha = e; 34 var one = e.parentNode.childNodes[1]; 35 if(cha.innerHTML=="修改"){ 36 var inn = one.innerHTML; 37 one.innerHTML="<input type='text' value="+inn+" />"; 38 cha.innerHTML="保存"; 39 }else if(cha.innerHTML=="保存"){ 40 var inn = one.firstChild.value; 41 one.innerHTML=inn; 42 cha.innerHTML="修改"; 43 } 44 } 45 function new1(){ 46 var a1 = document.getElementsByClassName("outer"); 47 var a2 = a1[0].cloneNode(true); 48 document.getElementsByClassName("inn")[0].appendChild(a2); 49 } 50 </script> 51 </body> 52 </html>
