主要实现原理：

每一行有一个修改按钮 点击修改之后，获取行对象，通过行对象再获取行中单元格数组。然后把每一个单元格中的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. C#变量、输入、数据类型的自动转换

  2. 【原】iOS触摸事件深度解析

    概述 本文主要解析从我们的手指触摸苹果设备到最终响应事件的整个处理机制.本质上讲,整个过程可以分为两个步骤: 步骤1:找目标.在iOS视图层次结构中找到触摸事件的最终接受者: 步骤2:事件响应.基于i ...

  3. 页面之间传值方式的总结,五种方式,通知,block,代理,单例,NSUERDEFALUT,

    首先代码拿上 1:单例 2:通知 3:代理 4:block方法 5:NSUSERDEFAULT(沙盒文件) 先是单例类: .h文件 @interface DataSource : NSObject @ ...

  4. Android 热修复，插件式开发---基本知识

    Android插件技术已经出来很久了,从包建强大大的那篇<Android插件化:从入门到放弃>出来以后,插件化技术的场景也明朗了. app插件牵涉到很多基础 1.app的启动流程 过程分析 ...

  5. W3School-CSS 内边距 (padding) 实例

    CSS 内边距 (padding) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CS ...

  6. PostgreSQL-角色、库、模式、表

    由于不了解postgresql的psql工具,安装完数据库后就直接用pgadmin或navicat来连接操作,在确认初始化后的库中默认有些什么东西后竟然一直无处下手,在还没有了解pg大致体系的情况下搞 ...

  7. Centos 7 Docker、docker-compose、Registrator、Consul、Consul Template和Nginx实现高可扩展的Web框架

    安装所需软件 Docker Docker-compose 配置docker-compose.yml文件内容如下: #load balancer will automatically update th ...

  8. jQuery 3.0的domManip浅析

    domManip 这个函数的历史由来已久,从 jQuery 1.0 版本开始便存在了,一直到最新的 jQuery 版本.可谓是元老级工具函数. domManip 的主要功能是为了实现 DOM 的插入和 ...

  9. 将Apache手动安装成Windows的服务

    将Apache手动安装成Windows的服务 可以选择在安装Apache时自动将其安装为一个服务.如果选择"for all users",那么Apache将会被安装为服务. 如果选 ...

  10. hortonworks2.5.3 install step log

    1.创建本地YUM源,下载TAR.GZ HDP,HDP-UTILS,AMBARI介质安装HTTPD,在/VAR/WWW/HTML/下创建三个相应的目录,把以上解压的三个目录链接过来在三个目录中执行命令 ...