//代码
<!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. 共用体 union

    共用体是一种数据格式,能够存储不同的数据类型,但只能同时存储其中的一种类型. union one4all { int int_val; double double_val; long long_val ...

  2. bzoj2124 等差子序列（树状数组+hash）

    题意 给你一个1~n排列,问有没有一个等差数列(长度至少为3) 题解 我居然自己想到了正解. 但我最后写挂了,所以我又看了题解. 我们维护了一个以权值为下标的01序列. 我们扫描整个序列.对于每一个正 ...

  3. 洛谷 P1020 导弹拦截 （LIS）

    第一问最长 不上升子序列,第二问最长上升子序列 套模板就好https://blog.csdn.net/qq_34416123/article/details/81358447 那个神奇的定理当作结论吧 ...

  4. ECNUOJ 2575 Separate Connections

    Separate Connections Time Limit:5000MS Memory Limit:65536KBTotal Submit:421 Accepted:41 Description  ...

  5. 使用ThoughtWorks.QRCode生成二维码

    新建Windows应用程序,加入引用ThoughtWorks.QRCode.dll,编写代码生成二维码. using System; using System.Drawing; using Syste ...

  6. 基于BP神经网络的简单字符识别算法自小结(C语言版)

    本文均属自己阅读源代码的点滴总结.转账请注明出处谢谢. 欢迎和大家交流.qq:1037701636 email:gzzaigcn2009@163.com 写在前面的闲话: 自我感觉自己应该不是一个非常 ...

  7. eclipse C开发添加自己的头文件搜索路径

    eclipse编译C程序时提示: ..\src\main.c:8:21: fatal error: my_type.h: No such file or directory 如图: 需要添加自己的头文 ...

  8. POJ 1682 DP

    原创: http://www.cnblogs.com/proverbs/archive/2012/10/03/2711151.html 超高仿: http://blog.csdn.net/mars_c ...

  9. nginx假死导致的问题回顾

    背景: 网络大致拓扑型 定位到一台Nginx节点于凌晨Timewait异常,等到6K. 进程异常,ngx_http_realtime_request模块错误 错误日志: 2017/02/24 00:0 ...

  10. 电脑无法上网，DHCP客户端不能正确获取IP地址

    问题特征:DHCP服务器更新[保留]配置信息后,给一客户端绑定了新的IP地址;但客户端IP地址并未正确更新; 处理: 一.检查DHCP服务器配置; 1.MAC地址.IP地址均正确;并已“添加到筛选器” ...