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

<!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. Quick Cocos 旋转子弹的实现中我学到的

    self 在lua中相当于java中的this lua中的任何变量在没有赋值前, 都可以看做是nil  lua变量有3种,成员变量: self.变量名 = 局部变量: local 变量名 = 全局变量 ...

  2. [cocos] ( 01 ) cocos2d-x 3.x 开发 环境配置

    有几个需要注意的问题 Windows上使用时, Unable to execute dex: Multiple dex files define 在eclipse中libcoco2dx的Java Bu ...

  3. 负载均衡-基础-一致性哈希算法及java实现

    一致性hash算法,参考: http://www.blogjava.net/hello-yun/archive/2012/10/10/389289.html 针对这篇文章,加入了自己的理解,在原有的代 ...

  4. HTML5存储之 indexedDB

    IndexeDB是HTML5 重要的一部分,它是一种轻量级的NOSQL数据库.对创建具有丰富本地存储数据的数据密集型的离线HTML5 Web 应用程序很有用. IndexedDB是为了能够在客户端存储 ...

  5. BZOJ 3771: Triple

    Description 问所有三/二/一元组可能形成的组合. Sol FFT. 利用生成函数直接FFT一下,然后就是计算,计算的时候简单的容斥一下. 任意三个-3*两个相同的+2*全部相同的+任意两个 ...

  6. 提交按钮ajax方式

    function doSubmit2(){ $("#formobj").form("submit", { url : "sjsCorporationC ...

  7. Python全栈开发【re正则模块】

    re正则模块 本节内容: 正则介绍 元字符及元字符集 元字符转义符 re模块下的常用方法 正则介绍(re) 正则表达式(或 RE)是一种小型的.高度专业化的编程语言. 在Python中,它内嵌在Pyt ...

  8. js词法分析

    JavaScript的高级知识---词法分析 词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 函数在运行的瞬间, ...

  9. 「C++」理解智能指针

    维基百科上面对于「智能指针」是这样描述的: 智能指针(英语:Smart pointer)是一种抽象的数据类型.在程序设计中,它通常是经由类型模板(class template)来实做,借由模板(tem ...

  10. from表单如果未指定action，submit提交时候会执行当前url

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...