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

<!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. Qt 5.0+ 中 connect 新语法与重载函数不兼容问题的解决方法，以及个人看法

    Qt 5.0+ 版本提供了 connect 的新语法,相比之前的语法新语法可以提供编译期检查,使用也更方便.可是使用过程中发现一个小问题——当某个 signal 和成员函数是重载关系的时候,qmake ...

  2. IE的F12开发人员工具不显示

    IE的F12开发人员工具不显示问题: 按下F12之后,开发人员工具在桌面上看不到,但是任务栏里有显示.将鼠标放在任务栏的开发人员工具上,出现一片透明的区域,选中之后却出不来.将鼠标移动到开发人员工具的 ...

  3. html页面读取PDF小案例

    html页面 引用<script src="js/pdfobject.js" type="text/javascript" charset="u ...

  4. Array的个人总结

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  5. KMP模板

    参考:http://www.cnblogs.com/c-cloud/p/3224788.html #include<stdio.h> #include<string.h> vo ...

  6. Java Native Interface 四--JNI中引用类型

    本文是<The Java Native Interface Programmer's Guide and Specification>读书笔记 JNI支持将类实例和数组类型(如jobjec ...

  7. kernel 4.4.12 EETI eGTouch 电容屏驱动移植

    kernel 4.4.12 EETI eGTouch 电容屏驱动移植: 在make menuconfig 里面添加如下选项: 添加通过事件上报接口节点: Device Drivers ---> ...

  8. 通过数组和枚举简化GPIO操作编码

    在工作中,经常遇到大量使用GPIO作为数字量输入输出来控制设备或采集状态,每次定义操作不同的GPIO针脚既麻烦又容易出错,于是就想要简化操作过程.对于数字量输入来说就是采集对应针脚的状态:而输出则是根 ...

  9. 存储过程 Row_number() 分页

    ---恢复内容开始--- 自己之前一直是使用的通用的存储过程 ,也是封装好的只要传表名 + 条件 等等 来到新环境 让自己写一个存储过程, 没办法 自己就需要写一个咯 之前写的比较多的是 按 top ...

  10. Idea 快捷键

    Ctrl+Alt+T 选中代码块加try catch等常用快捷操作.如图: psvm+Tab键 快速创建main方法 pout+Tab键 快速打出System.out.println(); Ctrl+ ...