实现表格的可编辑，点击修改以后可以编辑，代码如下：

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="utf-8">

        <title>可编辑表格</title>

<style>

    .table1 td{height:30px;width:100px}

    .input{padding:0;margin:0;height:100%;width:100%;border:none;}

</style>

    <head>

<body>

<h4>可编辑表格:</h4>

<table id="table" class="table1" border="1" cellspacing="0">

<tr>

  <td>test1</td>

  <td>test2</td>

    <td><button onclick="update(this,0)">修改</button></td>

</tr>

<tr>

  <td>test3</td>

  <td>test4</td>

    <td><button onclick="update(this,1)">修改</button></td>

</tr>

    <tr>

  <td>test5</td>

  <td>test6</td>

    <td><button onclick="update(this,2)">修改</button></td>

</tr>

    <tr>

  <td>test7</td>

  <td>test8</td>

    <td><button onclick="update(this,3)">修改</button></td>

</tr>

    </table>

    <script>

    function update(obj,x){

    var table = document.getElementById("table");

    for(var i=0;i<table.rows[x].cells.length-1;i++){

    var text = table.rows[x].cells[i].innerHTML;

    table.rows[x].cells[i].innerHTML = '<input class="input" name="input'+ x + '" type="text" value=""/>';

    var input = document.getElementsByName("input" + x);

    input[i].value = text;

    input[0].focus();

    input[0].select();

    }

    obj.innerHTML = "确定";

    obj.onclick = function onclick(event) {

                    update_success(this,x)

                    };

    }

    function update_success(obj,x){

        var arr = [];

        var table = document.getElementById("table");

        var input = document.getElementsByName("input" + x);

        for(var i=0;i<table.rows[x].cells.length-1;i++){

        var text = input[i].value;

        arr.push(text);

        }

        //把值赋值给表格，不能在取值的时候给，会打乱input的个数

        for(var j=0;j<arr.length;j++){

            table.rows[x].cells[j].innerHTML = arr[j];

        }

        //回到原来状态

        obj.innerHTML = "修改";

        obj.onclick = function onclick(event) {

                    update(this,x)

                    };

        alert(arr + ",传到后端操作成功，刷新页面");

    }

    </script>

</body>

</html>

实现效果：

js 实现表格的可编辑状态的更多相关文章

  1. Java中如何设置表格处于不可编辑状态

    代码片段如下: 这样的话就可以将表格设置为不可编辑状态

  2. Bootstrap：Bootstrap_table第一篇：快速用bootstrap_table（支持参数）筛选并展示数据，固定表格前几列，实现表格单元格编辑

    1.准备好css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ...

  3. Django前端HTML通过JS实现表格可编辑，动态添加行，回车完成新建文件夹

    功能描述: 点击“新建文件夹”按钮,在table的末尾增加一行:单击页面的新增行,使单元格td变成可编辑状态:输入内容后,当单元格失去焦点时,保存输入的内容:回车后通过AJAX提交后台完成新建文件夹. ...

  4. vue 表格数据编辑，点击取消或者完成按钮后，关闭编辑状态没有及时生效

    点击编辑按钮: 编辑状态下,表格可以编辑.但是点击“确认”或者“取消”按钮,列数据编辑状态已经修改,但是视图没有改变. 页面代码: 获取当前行的index,并直接修改当前行用于判断是否编辑状态的数据为 ...

  5. 解除网页右键限制和开启网页编辑状态的js代码

    当访问页面右键被限制了怎么办?很好办!将以下代码添加进收藏夹,点击执行即可: javascript:alert(document.onselectstart = document.onbeforeco ...

  6. easyui 在编辑状态下，动态修改其他列值。

    首先是自定义了一个方法uodateColumn更新列值 /** *自定义的修改列值方法 */ $.extend($.fn.datagrid.methods, { updateColumn: funct ...

  7. JS中表格的全选和删除要注意的问题

    在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...

  8. JTable只要一双击就进入编辑状态,禁止的方法实现

    我用JTable做了一个表格,表格内容只供查看和选择,可每次只要一双击,就进入编辑状态,可是现在我不需要当双击的时候修改表格的内容.这时候需要重载isCellEditable方法. 下面是我的实现的代 ...

  9. AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除

    AngularJS实现表格数据的编辑,更新和删除 效果 实现 首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据 var app = angular.module('plunker', [' ...

随机推荐

  1. rpm查询命令摘要

    任务 命令 显示软件包的相关信息 rpm -q -i NAME 列出软件包中含有的所有文件 rpm -q -i NAME 列出软件包中含有的配置文件 rpm -q -c NAME 列出软件包中含有的文 ...

  2. Linux各个目录的作用及内容

    1)根目录“/”    根目录位于目录结构的最顶层,用斜线(/)表示,类似于Windows操作系统的“C:\“,包含Fedora操作系统中所有的目录和文件. 2)/bin    /bin 目录又称为二 ...

  3. Java 压缩/ 解压 .Z 文件

    1.问题描述 公司项目有需要用 JAVA 解压 .z文件. .z 是 unix 系统常见的压缩文件. 2.源码 import com.chilkatsoft.CkUnixCompress; impor ...

  4. 在Centos中部署redis运行状态图形化监控工具 — RedisLive

    写在前面 前两天看到张善友老师的一篇文章<先定个小目标, 使用C# 开发的千万级应用>,里面给出了一张腾讯OA基础服务中redis运行情况的一张监控图,然后想到自己的项目中前不久也上了re ...

  5. 51Nod 算法马拉松21(迎新年)

    这次打算法马拉松是在星期五的晚上,发挥还算正常(废话,剩下的题都不会= =). 讲讲比赛经过吧. 8:00准时发题,拿到之后第一时间开始读. A配对,看上去像是二分图最大权匹配,一看范围吓傻了,先跳过 ...

  6. Delaunay剖分与平面欧几里得距离最小生成树

    这个东西代码我是对着Trinkle的写的,所以就不放代码了.. Delaunay剖分的定义: 一个三角剖分是Delaunay的当且仅当其中的每个三角形的外接圆内部(不包括边界)都没有点. 它的存在性是 ...

  7. ffmpeg+x264 Windows MSVC 静态编译

    尝试ubuntu和win下mingw编译版本,但都在Vistual Studio链接时因为依赖 libgcc.a, libmingw.a, libmingwex.a 会与mscrt 有符号冲突. 最后 ...

  8. 第二天--html+css

    <!Doctype html><html>    <head>        <meta charset="utf-8">      ...

  9. vs2013在使用ReportView11时遇到的问题

    最近在做项目中用到2013中的ReportView11  在本机IIS中使用完全没问题  但是放到服务器上总是出问题 解决办法:(1)首先在自己机器上开发的时候  是不用引用  Microsoft.R ...

  10. 401 - 未授权：由于凭据无效，访问被拒绝”在iis的解决办法

    1.打开"IIS信息服务管理器"-->选择你发布的网站-->选择功能视图中的"身份验证"-->右键匿名身份验证,选择"编辑" ...