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>可编辑表格</title> 10 </head> 11 <body> 12 <script type="text/javascript"> 13 function rewrite(){ 14 //获取td表格 15 var nameTd=document.getElementById("name"); 16 //获取用户名 17 var name=nameTd.innerHTML; 18 //将用户名的改成text，并保留原用户名 19 nameTd.innerHTML='<input type="text" id="rename" value="'+name+'">' 20 //获取修改按钮，改为保存 21 var reBtn=document.getElementById("reBtn").value="保存" 22 document.getElementById("reBtn").onclick=save 23 24 } 25 function save(){ 26 //获取td表格 27 var nameTd=document.getElementById("name"); 28 //获取修改后的用户名 29 var rename=document.getElementById("rename").value; 30 //改text为用户名 31 nameTd.innerHTML=rename 32 //获取保存按钮，改为修改 33 var reBtn=document.getElementById("reBtn").value="修改" 34 document.getElementById("reBtn").onclick=rewrite 35 } 36 </script> 37 <table border="1" width="300px" height="40px"> 38 <tr> 39 <td>姓名</td> 40 <td>操作</td> 41 </tr> 42 <tr> 43 <td><span id="name">zhangsan</span></td> 44 <td><input type="button" id="reBtn" value="修改" onclick="rewrite()"></td> 45 </tr> 46 </table> 47 48 </body> 49 </html>