JS-可编辑表格

 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>