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

<!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. D3.js学习（三）

    上一节中,我们已经画出了图表,并且给图表添加了坐标轴的标签和标题,在这一节中,我们将要学习几个绘制线条不同特性的几个函数,以及给图表添加格栅.ok,进入话题! 如何给线条设置绘制的样式? 这个其实非常 ...

  2. AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题

    场景: Select初始化之后,选中select的某个选项 通过AngularJS更新select的选项 错误写法: HTML(使用ng-repeat) <div ng-app="Te ...

  3. URI编码解码

    .NET string s= System.Web.HttpUtility.UrlEncode("123", System.Text.Encoding.Unicode); //编码 ...

  4. ios app的版本号

    ios其实有3个版本号 version 就是ios的版本号 (只能分3段,并且都是数字) build 是ios构建内部版本时的版本号 (可以分4段) 而提交到appstore时, 还是要创建一个sku ...

  5. composer

    composer 是PHP框架的包安装工具,类似于bower ,npm.bundler. 是命令行工具,没有图形界面. 系统要求 运行 Composer 需要 PHP + 以上版本.一些敏感的 PHP ...

  6. PHP语言中使用JSON和将json还原成数组

    从5.2版本开始,PHP原生提供json_encode()和json_decode()函数,前者用于编码,后者用于解码. 一.json_encode() 1 2 3 4 <?php $arr = ...

  7. 将十进制数转为一个n位数的密码(每位都是个m进制数)

    例如一个6位数的10进制密码,共有106个密码,如果把每个6位数的密码编成号就是[0,106-1].这是十进制的情况,即6个位,每个位有10种选择.如果要遍历所有密码,需要6重for循环,每个循环10 ...

  8. ping 或者ssh 发生connect: No buffer space available 错误

    如果遇到这种情况,一般说明你的本地服务器的arp表缓存太大,而服务器内核设定的回收条数太小,一直被回收造成的. 可以用一下命令扩大arp表可以缓存的记录条数: echo 512 > /proc/ ...

  9. ubuntu 好玩多了

    从一开始的咒骂,到慢慢的喜欢,ubuntu比CentOs可玩多了.

  10. ACM/ICPC 之 中国剩余定理+容斥原理(HDU5768)

    二进制枚举+容斥原理+中国剩余定理 #include<iostream> #include<cstring> #include<cstdio> #include&l ...