主要实现原理：

每一行有一个修改按钮 点击修改之后，获取行对象，通过行对象再获取行中单元格数组。然后把每一个单元格中的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. H5与CS3权威上.5 绘制图形（1）

    1.canvas元素基础知识 (1)在页面上放置canvas元素,相当于在页面上放置一块"画布",可以用Javascript编写在其中进行绘画的脚本. (2)在页面中放置canva ...

  2. js严格模式总结

    首先,我们要理解严格模式的概念,严格模式是一种特殊的执行模式,它修复了部分语言上的不足,提供更强的错误检查,病增强安全性.可以对部分函数进行执行严格模式,如: function func(){ 'us ...

  3. hyper-v上的虚拟机安装linux LC后CDROM无法使用

    This issue occurs because the Hyper-V Linux Integration Services unloads the ata_piix driver in orde ...

  4. [转]利用JitPack发布自己项目让别人可以在dependencies中compile的简单方法

    JitPack的地址为:https://jitpack.io/ 发布 登陆 jitpack 在编辑框中输入github的网址,完成后点击LookUp 使用 点击 Get it. 之后网页就会自动导航到 ...

  5. IOS开发基础知识--碎片4

    十七:返回到主线程进行操作,对UI进行更新只能在主线程进行 /*将数据显示到UI控件,注意只能在主线程中更新UI, 另外performSelectorOnMainThread方法是NSObject的分 ...

  6. AndroidStudio配置gradle，让App自动签名

    最近开发关于微信一系列功能,发现分享.支付必须要打包签名才能测试,太耽误事了,耗时耗力...在网上扒拉扒拉资料,发现有很多前辈都处理过类似问题,非常感谢大家的分享,参考链接:http://blog.c ...

  7. 将ASP.NET Core应用程序部署至生产环境中（CentOS7）

    这段时间在使用Rabbit RPC重构公司的一套系统(微信相关),而最近相关检验(逻辑测试.压力测试)已经完成,接近部署至线上生产环境从而捣鼓了ASP.NET Core应用程序在CentOS上的部署方 ...

  8. ORACLE告警日志文件

    告警日志介绍 告警日志文件是一类特殊的跟踪文件(trace file).告警日志文件命名一般为alert_<SID>.log,其中SID为ORACLE数据库实例名称.数据库告警日志是按时间 ...

  9. Microsoft SQL Server 2005 Service fails to start

    今天碰到一雷死人的事情,在Windows Server 2012 R2上安装SQL SERVER 2005标准版过程中一直遇到"The SQL Server service failed t ...

  10. Android开发究竟用什么工具，Eclipse||AS

    所谓公欲善其事必先利器,那就让我们来看一下android的开发工具吧,安卓的开发工具有Eclipse和Android Studio,另外还有IntelliJ IDEA,可能很多人并不知道. 首先看一下 ...