JQ 实施编辑 (clone()复制行||双击编辑)
//代码
<!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()复制行||双击编辑)的更多相关文章
- Dynamics 365新功能:可编辑的网格(行内编辑)
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复238或者20161127可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...
- 怎样使GridView中满足某个条件的行可编辑,其余行不可编辑?
DXperience是个很优秀的第三方控件包,使用起来非常方便,但有时候某些功能的实现在文档中不太容易找到解决方案,比如下面要提到的这个功能我就在文档中找了很久也没找到,最后还是在官方论坛上找到的. ...
- 【DEV GridControl】怎样使GridView中满足某个条件的行可编辑,其余行不可编辑?
DXperience控件包,使用起来非常方便,但有时候某些功能的实现在文档中不太容易找到解决方案,比如下面要提到的这个功能我就在文档中找了很久也没找到,最后还是在官方论坛上找到的. 具体问题是这样的: ...
- 3、easyUI-创建 CRUD可创建展开行明细编辑dataGrid(表格)
同样在上一节中讲到可以编辑的表格,现在讲一般用到的最后一个datagrid(表格)相关的展开明细可编辑的表格: 第三中表格主要应用场景在:列出表格信息,然后点击可以查看详细信息(此处是全部可以编辑,可 ...
- EasyUI的datagrid获取所有正在编辑状态的行的行编号
今天项目需要用了下EasyUI的datagrid的行编辑功能,跟着API来,只要是将各种状态时的处理逻辑弄好,还是蛮不错的. 开发过程中,遇到了个问题,在编辑完成后我需要获取datagrid所有处于编 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(83)-Easyui Datagrid 行内编辑扩展
这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务,上一节讲述了Datagird的批量编辑和提交本节主要演示扩展Datagrid行内编辑的属性,下面来看一个例子,我开启编辑行的时 ...
- 让nodepad++编辑时链接能双击打开
让nodepad++编辑时链接能双击打开,Notepad++自动把代码或编辑状态里的链接或URL地址转成可点击的链接,当你双击该URL会打开相应的网页地址,不用复制地址到浏览器打开了,非常方便好用. ...
- 如何禁用 FastAdmin 双击编辑功能?
如何禁用 FastAdmin 双击编辑功能? 新版 (1.0.0.20180513_beta)增加一个新功能,可以禁止双击编辑. 很多人还是喜欢双击选中复制,默认的双击编辑还是不怎么习惯. 可以以下文 ...
- gridgroup行内编辑删除
Ext.define('Task', { extend: 'Ext.data.Model', idProperty: 'taskId', fields: [ { name: 'projectId', ...
随机推荐
- Audio / Video Playback
For Developers > Design Documents > Audio / Video Playback Interested in helping out? Ch ...
- 设置cookie的方法
设置cookie的方法 1.登录之后后端返回的cookie放在响应的数据里,我们可以取到值, 这样就设置上了一个cookie,然后由于我们需要在三个环境里进行操作,开发环境.测试环境.生产环境.刚刚上 ...
- 使用 AutoHotKey 配合Win10分屏功能
Win+tab键 建立新的虚拟桌面 使用笔记本电脑的触摸板,用四个手指滑的话就可以在虚拟桌面间切换 那么就映射一下, 要是能一键切换的话就相当于是个"老板键"了 1.安装AutoH ...
- UVA-10200 Prime Time 素数(注意除法精度)
题目链接:https://cn.vjudge.net/problem/UVA-10200 题意 给出一个公式$ m=n^2+n+41, n \in Z^+ $ 现在$ a,b\in[0, 10000] ...
- Spring MVC框架一个实例的手动实现
文件结构: SpringMVC05 // 应用程序名 ----index.html // 欢迎文件,主目录下的文件可以被URL直接访问到 ----WEB-INF // 这个目录下的文件将被保护起来不能 ...
- linux学习之多高并发服务器篇(一)
高并发服务器 高并发服务器 并发服务器开发 1.多进程并发服务器 使用多进程并发服务器时要考虑以下几点: 父最大文件描述个数(父进程中需要close关闭accept返回的新文件描述符) 系统内创建进程 ...
- 【Henu ACM Round#19 D】 Points on Line
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 考虑l..r这个区间. 且r是满足a[r]-a[l]<=d的最大的r 如果是第一个找到的区间,则直接累加C(r-l+1,3); ...
- ECNUOJ 2150 完美的拯救
完美的拯救 Time Limit:1000MS Memory Limit:65536KBTotal Submit:147 Accepted:50 Description 一只可怜的蚂蚁被万恶的魔术师 ...
- COGS——T1310. [HAOI2006]聪明的猴子
http://cogs.pro/cogs/problem/problem.php?pid=1310 ★ 输入文件:monkey.in 输出文件:monkey.out 简单对比时间限制:1 ...
- C语言typedef struct具体解释
在C中定义一个结构体要用typedef,如: typedef struct Student { int a; }Stu; 于是在声明变量的时候就能够:Stu stu1;(假设没有typedef就必须用 ...