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

<!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. 记一次Suse下的Django环境配置——第一弹

    一.安装Python 由于原有Suse自带的Python版本只有2.4,因此首先需要安装Python的高版本,在这里我选择使用Python2.7.9.PS:之前选择使用2.7.11版本,由于没有zli ...

  2. Xcode 快捷键、常用技巧

    关于iOS开发中的技能快捷键 经常使用鼠标太TM的D疼了,快捷键能大大地提高我们的开发速度,使我们的手指尽情的在键盘上飞舞,优美的代码,哈哈哈,那些常规的复制.粘贴.剪切请自行度娘或者Google一下 ...

  3. mysql_config 问题

    1 .you should have mysql_config available in $PATH For CentOS: yum install mysql-devel For openSUSE: ...

  4. Linux（Ubuntu）下安装NodeJs

    用以下命令来升级系统,并且安装一些Node.JS必要的包. Linux(Ubuntu)下安装NodeJs 安装nodeJS之前,如果没有安装g++ make libssl-dev等, 1.更新系统和依 ...

  5. .Net Core--目录

    参考资料: .Net Core官网 https://www.microsoft.com/net/core 官方文档: https://docs.asp.net 博客园中文文档: http://www. ...

  6. Life Is A Funny Proposition After All

    你们有没有坐下思考,感到疑惑 ,静静思考,我们为什么在这里 ,生活为什么如此这般 这个问题让无数聪明人喝酒买醉,这是最最奇怪的事情,他们都想弄清楚,科学家们可以展示上千种不同的理论,但从未证明这是为什 ...

  7. [CodeWars][JS]实现大整数加法

    问题描述 实现‘字符串加法’,即将两个以字符串形式表示的数字相加,得到结果然后返回一个新的字符串. 例如:输入‘123’,‘321’,返回‘444’. 这样在进行两个任意大的整数相加的时候,既不会溢出 ...

  8. saltstack命令执行过程

    saltstack命令执行过程 具体步骤如下 Salt stack的Master与Minion之间通过ZeroMq进行消息传递,使用了ZeroMq的发布-订阅模式,连接方式包括tcp,ipc salt ...

  9. [转]加速Android Studio/Gradle构建

    加速Android Studio/Gradle构建 android android studio gradle   已经使用Android Studio进行开发超过一年,随着项目的增大,依赖库的增多, ...

  10. 关于so文件cp覆盖导致调用者core的研究

    先说cp好mv/rm的区别: cp from to,则被覆盖文件 to的inode依旧不变(属性也不变),内容变为from的: mv from to,则to的inode变为from的,相应的,to的属 ...