js实现点击修改按钮之后单元格变成可编辑状态

主要实现原理：

每一行有一个修改按钮 点击修改之后，获取行对象，通过行对象再获取行中单元格数组。然后把每一个单元格中的innerHTML替换成input输入框，并赋值value=原来单元格中的内容，鼠标移开之后还原。

效果图：点击之前

           点击之后

　　　　修改之后移开失去焦点：

这里应该还要当鼠标移开之后也就是失去焦点事件就触动函数，用ajax把数据提交到数据中去，并且输入框变回到原来的形式

 完整代码:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2         "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <head>
 5     <title>asd</title>
 6     <meta charset=utf-8>
 7      <script type="text/javascript">
 8          //点击之后页面变成可提交状态
 9          function xiugai(a){
10              var trobj = a.parentNode.parentNode; //获得按钮所在行的行对象
11              var tdobj = trobj.getElementsByTagName("td");
12              for(var i =0;i<tdobj.length-1;i++){
13                  //循环把每一个单元格变成input类型
14                  tdobj[i].innerHTML ="<input onblur='submit(this)' type=\"input\" value='" +tdobj[i].innerText+ " '/>";
15              }
16          }
17          //异步提交
18          function submit(inputobj){
19              $.ajax(
20                      {
21                          url: "Add",
22                          type: "post",
23                          datatype:"json",
24                          success: function (result) { //返回的结果自动放在resut里面了
25                                 if(result != null){
26                                     inputobj.parentNode.innerText=inputobj.value;//去掉输入框并赋值给单元格
27                                 }
28                          }
29                      });
30          }
31      </script>
32 </head>
33 <body>
34     <table>
35         <tr>
36             <td>123</td>
37             <td>123</td>
38             <td>123</td>
39             <td><input type="button" onclick="xiugai(this)" value="修改"/></td>
40         </tr>
41     </table>
42 </body>
43 </html>

 

posted @ 2014-03-11 23:36  夜猫子探路  阅读(2606)  评论(1)  编辑  收藏  举报