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

时间：2024-10-02 23:35:45

主要实现原理：

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

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

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

　　　　修改之后移开失去焦点：js实现点击修改按钮之后单元格变成可编辑状态

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

完整代码:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

         "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

     <title>asd</title>

     <meta charset=utf->

      <script type="text/javascript">

          //点击之后页面变成可提交状态

          function xiugai(a){

              var trobj = a.parentNode.parentNode; //获得按钮所在行的行对象

              var tdobj = trobj.getElementsByTagName("td");

              for(var i =;i<tdobj.length-;i++){

                  //循环把每一个单元格变成input类型

                  tdobj[i].innerHTML ="<input onblur='submit(this)' type=\"input\" value='" +tdobj[i].innerText+ " '/>";

              }

          }

          //异步提交

          function submit(inputobj){

              $.ajax(

                      {

                          url: "Add",

                          type: "post",

                          datatype:"json",

                          success: function (result) { //返回的结果自动放在resut里面了

                                 if(result != null){

                                     inputobj.parentNode.innerText=inputobj.value;//去掉输入框并赋值给单元格

                                 }

                          }

                      });

          }

      </script>

 </head>

 <body>

     <table>

         <tr>

             <td></td>

             <td></td>

             <td></td>

             <td><input type="button" onclick="xiugai(this)" value="修改"/></td>

         </tr>

     </table>

 </body>

 </html>

相关文章