主要实现原理：

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

效果图：点击之前

点击之后

　　　　修改之后移开失去焦点：

这里应该还要当鼠标移开之后也就是失去焦点事件就触动函数，用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>

js实现点击修改按钮之后单元格变成可编辑状态的更多相关文章

  1. finereport JS 获取按钮所在单元格的值及获取当前报表的变量

    1.通过按钮获取单元格所在的值 debugger; var cr; if(window.lineboxes) { var cells = []; for (var i = 0; i < line ...

  2. JS实现填报时对修改过的单元格进行标识

    1. 描述 在填报预览时,对单元格编辑后,其左上角有个红色标记,但非常不明显,用户很难注意到.有没有什么好的办法,对单元格操作后,将其做较明显的特殊标记处理,方便用户识别呢? 如图所示:对单元格进行操 ...

  3. 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...

  4. js实现点击不同按钮切换内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 表格和echart二级联动，并通过点击echart高亮图标单元格

    html 部分 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF ...

  6. IOS 取消表格单元格 TableViewCell 去掉高亮状态 点击Cell取消选择状态

    以下是两种实现效果 1. 自定义cell 继承UITableViewCell 重写 -(void)setSelected:(BOOL)selected animated:(BOOL)animated ...

  7. js动态加载数据并合并单元格

    js动态加载数据合并单元格, 代码如下所示,可复制直接运行: <!DOCTYPE HTML> <html lang="en-US"> <head> ...

  8. C#修改 Excel指定单元格的值

    /// <summary> /// 将指定字符串写入指定单元格中 /// </summary> /// <param name="data">要 ...

  9. el-table单元格新增、编辑、删除功能

    <template> <div class="box"> <el-button class="addBtn" type=" ...

随机推荐

  1. Android 轻松实现仿淘宝地区选择

    介绍 最近用淘宝客户端的时候,编辑地址的时候有个地区选择的功能.看上面的效果觉得挺酷,滚动的时候,是最后一个从下面飞上来挨着前一个.就自己鼓捣一个出来玩玩. 说了效果可能不太直观,下面上两张图看看效果 ...

  2. MyBatis Generator作为maven插件自动生成增删改查代码及配置文件例子

    什么是MyBatis Generator MyBatis Generator (MBG) 是一个Mybatis的代码生成器,可以自动生成一些简单的CRUD(插入,查询,更新,删除)操作代码,model ...

  3. CLR简介（一）

    什么是通用语言运行时(CLR),简单来讲: CLR是一个支持多种编程语言及多语言互操作,完整的高级虚拟机. 有点拗口,而且不是很有启发性,但上面的文字是将又大又复杂的CLR的功能归类以便容易理解的第一 ...

  4. 常用的HTTP状态代码

    常用的HTTP状态代码如下: 400 无法解析此请求. 401.1 未经授权:访问由于凭据无效被拒绝. 401.2 未经授权: 访问由于服务器配置倾向使用替代身份验证方法而被拒绝. 401.3 未经授 ...

  5. 不好的MySQL过程编写习惯

    刚才为了测试一个东西,写了个存储过程: delimiter $$ drop procedure if exists sp_test$$ create procedure sp_test() begin ...

  6. 理解 Cinder 架构 - 每天5分钟玩转 OpenStack（45）

    从本节开始我们学习 OpenStack 的 Block Storage Service,Cinder 理解 Block Storage 操作系统获得存储空间的方式一般有两种: 通过某种协议(SAS,S ...

  7. andrioid 分享到其它（短信，qq，微信等功能）

    public static void share(Context context, String text) { Intent intent = new Intent(Intent.ACTION_SE ...

  8. hibernate 注解 唯一键约束 uniqueConstraints

    @Table 注解包含一个schema和一个catelog 属性,使用@UniqueConstraints 可以定义表的唯一约束. 如果是联合约束就用下面这种 @Table(name="tb ...

  9. [原创]基于rsync算法的目的性改进-RexSync

    rsync是一种文件差异传输的算法,特点是高效且相似块识别率较高.具体算法这边就不赘述,网上很多,官方文档也描述的很清楚. rsync提高文件比对效率的一个核心算法之一就是rolling checks ...

  10. 用javascript插入样式

    一.用javascript插入<style>样式 有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里面 ...