主要实现原理：

每一行有一个修改按钮 点击修改之后，获取行对象，通过行对象再获取行中单元格数组。然后把每一个单元格中的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. JavaScript中Array类型方法总结

    Array类型是ECMAScript中最常用的类型之一,ECMAScript中的数组与其他多数语言中的数组有着相当大的区别.ECMAScript数组的每一项可以保存任何类型的数据.这里总结了数组类型的 ...

  2. Android刷机教程之LG Nexus 5X线刷官方Nexus系列教程

    镜像下载地址:https://developers.google.com/android/nexus/images 1.打开手机 设置-关于手机-点击版本号7次,以打开“开发者选项” 2.返回上一步, ...

  3. iPhone 6 被盗记录二【写在315前夕：苹果售后福州直信创邺在没有三包的情况下帮小偷翻新、助力小偷换机销赃！无视王法。让人震惊，痛心，憎恨！消费者很受伤很无奈】

    投诉公司: 北京直信创邺数码科技有限公司  标题: 写在315前夕:苹果售后在没有三包的情况下帮小偷翻新.助力小偷换机销赃!无视王法.让人震惊,痛心,憎恨!消费者很受伤很无奈 期望: 还我手机,或者赔 ...

  4. SQL Server 中VARCHAR（MAX）变量赋值引起的性能问题。

    案例环境: 操作系统版本 : Windows Server 2008 R2 Standard  SP1 数据库版本   :  Microsoft SQL Server 2012 (SP1) - 11. ...

  5. SQL Server编程入门

    SQL编程要比Java编程.C#编程简单许多,下面我们直接讲干货21:04:31 使用变量 局部变量 在T-SQL中,局部变量的名称必须以标记@作为前缀.T-SQL的局部变量其实和Java中的局部变量 ...

  6. 《java JDK7 学习笔记》之对象封装

    1.构造函数实现对象初始化流程的封装.方法封装了操作对象的流程.java中还可以使用private封装对象私有数据成员.封装的目的主要就是隐藏对象细节,将对象当做黑箱子进行操作. 2.在java命名规 ...

  7. 理解 Glance - 每天5分钟玩转 OpenStack（20）

    OpenStack 由 Glance 提供 Image 服务. 理解 Image 要理解 Image Service 先得搞清楚什么是 Image 以及为什么要用 Image? 在传统 IT 环境下, ...

  8. 【转】App架构设计经验谈：接口的设计

    App架构设计经验谈:接口的设计 App与服务器的通信接口如何设计得好,需要考虑的地方挺多的,在此根据我的一些经验做一些总结分享,旨在抛砖引玉. 安全机制的设计 现在,大部分App的接口都采用REST ...

  9. 转《WF编程》笔记目录

    <WF编程>笔记目录 2008-03-18 09:33 by Windie Chai, 26803 阅读, 49 评论, 收藏, 编辑 WF笔记开始 <WF编程>系列之0 - ...

  10. 理解Docker（1）：Docker 安装和基础用法

    本系列文章将介绍Docker的有关知识: (1)Docker 安装及基本用法 (2)Docker 镜像 (3)Docker 容器的隔离性 - 使用 Linux namespace 隔离容器的运行环境 ...