//代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin:0;padding:0}
            table,td{
                border:1px solid #000000;
            }
            td{
                width:100px;
                height:30px;
                text-align: center;
            }
            input{
                width:100px;
                height:30px;
            }
        </style>
    </head>
    <script src ="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
    <body>
        行:<input type="text" id = "rowTxt" value = "3"/>
        列:<input type="text" id = "colTxt" value = "4"/>
        <button id = "btn">确定</button>
    </body>

    <script>
    $(document).ready(function(){
        $("#btn").click(function(){
            $("table").remove();
            var rowVal = parseInt($("#rowTxt").val());
            var colVal = parseInt($("#colTxt").val());
            $(document.body).append("<table></table>");
            for(var i = 0 ; i < rowVal ;i++){
                $("table").append("<tr></tr>");
            }
            $("tr").each(function(){
                for(var j = 0 ; j < colVal ; j++){
                    $(this).append("<td></td>");
                }
                $(this).append("<button>删除</button>");
                $(this).append("<button>添加一行</button>");
            })
        })

        $(document).click(function(e){
            var e = e||event;
            if(e.target.nodeName=="TD"){
                var tdTxt = $(e.target).html();
                $(e.target).html("");
                $(e.target).append("<input type='text' id = 'intxt' value = "+tdTxt+">");
                e.stopPropagation();
            }
            $(e.target).blur(function(){
                var newInput = $("#intxt").val();
                $(this).parent().html(newInput);
            })
            if(e.target.innerHTML=="删除"){
                $(e.target).parent().remove();
            }
            if(e.target.innerHTML=="添加一行"){
                $(e.target).parent().clone().children("td").html("").parent().clone().insertAfter($(e.target).parent())
            }
        })
    })
    </script>
</html>

JQ 实施编辑 （clone()复制行||双击编辑）的更多相关文章

  1. Dynamics 365新功能：可编辑的网格(行内编辑)

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复238或者20161127可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...

  2. 怎样使GridView中满足某个条件的行可编辑，其余行不可编辑？

    DXperience是个很优秀的第三方控件包,使用起来非常方便,但有时候某些功能的实现在文档中不太容易找到解决方案,比如下面要提到的这个功能我就在文档中找了很久也没找到,最后还是在官方论坛上找到的. ...

  3. 【DEV GridControl】怎样使GridView中满足某个条件的行可编辑，其余行不可编辑？

    DXperience控件包,使用起来非常方便,但有时候某些功能的实现在文档中不太容易找到解决方案,比如下面要提到的这个功能我就在文档中找了很久也没找到,最后还是在官方论坛上找到的. 具体问题是这样的: ...

  4. 3、easyUI-创建 CRUD可创建展开行明细编辑dataGrid（表格）

    同样在上一节中讲到可以编辑的表格,现在讲一般用到的最后一个datagrid(表格)相关的展开明细可编辑的表格: 第三中表格主要应用场景在:列出表格信息,然后点击可以查看详细信息(此处是全部可以编辑,可 ...

  5. EasyUI的datagrid获取所有正在编辑状态的行的行编号

    今天项目需要用了下EasyUI的datagrid的行编辑功能,跟着API来,只要是将各种状态时的处理逻辑弄好,还是蛮不错的. 开发过程中,遇到了个问题,在编辑完成后我需要获取datagrid所有处于编 ...

  6. ASP.NET MVC5+EF6+EasyUI 后台管理系统（83）-Easyui Datagrid 行内编辑扩展

    这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务,上一节讲述了Datagird的批量编辑和提交本节主要演示扩展Datagrid行内编辑的属性,下面来看一个例子,我开启编辑行的时 ...

  7. 让nodepad++编辑时链接能双击打开

    让nodepad++编辑时链接能双击打开,Notepad++自动把代码或编辑状态里的链接或URL地址转成可点击的链接,当你双击该URL会打开相应的网页地址,不用复制地址到浏览器打开了,非常方便好用. ...

  8. 如何禁用 FastAdmin 双击编辑功能？

    如何禁用 FastAdmin 双击编辑功能? 新版 (1.0.0.20180513_beta)增加一个新功能,可以禁止双击编辑. 很多人还是喜欢双击选中复制,默认的双击编辑还是不怎么习惯. 可以以下文 ...

  9. gridgroup行内编辑删除

    Ext.define('Task', { extend: 'Ext.data.Model', idProperty: 'taskId', fields: [ { name: 'projectId', ...

随机推荐

  1. Remmina：一个 Linux 下功能丰富的远程桌面共享工具(转载)

    Remmina:一个 Linux 下功能丰富的远程桌面共享工具 作者: Aaron Kili 译者: LCTT geekpi | 2017-05-10 09:05   评论: 2 收藏: 4 Remm ...

  2. 关于PHPExcel上传Excel单元格富文本和时间类型读取数据问题

    当用PHPExcel做Excel上传文件读取数据时,print_r出来的数据,竟然发现其中有几个单元格返回的是PHPExcel富文本对象,而且时间类型的单元格返回的是一个不是时间戳的五位数.就像下图那 ...

  3. 洛谷1525 关押罪犯NOIP2010 并查集

    问题描述 S城现有两座监狱,一共关押着N名罪犯,编号分别为1~N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用“怨气值”(一个正整数值)来表示某两 ...

  4. 《转载》编程入门指南 v1.4

    编程入门指南 v1.4 Badger · 8 个月前 作者:@萧井陌, @Badger 自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0 CoCode ...

  5. Could not create connection to database server. Attempted reconnect 3 times. Giving up.错误

    项目是基于springboot框架,昨天从git上pull代码之后也没有具体看更改的地方,结果运行的时候就报错了. java.sql.SQLNonTransientConnectionExceptio ...

  6. 关于vue自定义事件中，传递参数的一点理解

    例如有如下场景 先熟悉一下Vue事件处理 <!-- 父组件 --> <template> <div> <!--我们想在这个dealName的方法中传递额外参数 ...

  7. Android通过XML来定义Menu

    直接在代码中添加菜单项,给菜单项分组等,这是比较传统的做法,它存在着一些不足.比如说,为了响应每个菜单项,我们需要用常量来保存每个菜单项的ID等.为此,Android提供了一种更好的方式,就是把men ...

  8. mysql中lock tables与unlock tables(锁表/解锁)使用总结

    php mysql lock tables 使用有感 mysql 的 表锁 lock tables 感觉就像一个 封闭的空间 mysql发现 lock tables 命令的时候,会将带有锁标记的表(t ...

  9. poj 2533 Longest Ordered Subsequence 最长递增子序列(LIS)

    两种算法 1.  O(n^2) #include<iostream> #include<cstdio> #include<cstring> using namesp ...

  10. 目标跟踪--CamShift

    转载请注明出处! !! http://blog.csdn.net/zhonghuan1992 目标跟踪--CamShift CamShift全称是ContinuouslyAdaptive Mean S ...