1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="./js/jquery.js"></script>
5 <script>
6 $(function(){
7 $("#table").find("td").bind("dblclick",function(){
8 var input ="<input type=‘text‘ id=‘temp‘ value="+$(this).text()+" >";
9 $(this).text("");
10 $(this).append(input);
11 $("input#temp").focus();
12 $("input").blur(function(){
13 if($(this).val()==""){
14 $(this).remove();
15 }else{
16 $(this).closest("td").text($(this).val());
17 }
18 });
19 })
20
21 })
22
23 function ShowElement(element)
24 {
25 var oldhtml = element.innerHTML;
26 var newobj = document.createElement(‘input‘);//创建新的input元素
27 newobj.type = ‘text‘;//为新增元素添加类型
28 newobj.onblur = function(){
29 element.innerHTML = this.value ? this.value : oldhtml;//当触发时判断新增元素值是否为空,为空则不修改,并返回原有值
30 }
31 element.innerHTML = ‘‘;
32 element.appendChild(newobj);
33 newobj.focus();
34 }
35 </script>
36 </head>
37
38
39 <body>
40 <table border="1" width="200" id="table">
41 <tr><td>111</td></tr>
42 <tr><td>222</td></tr>
43 <tr><td>333</td></tr>
44 <tr><td>444</td></tr>
45 <tr><td>555</td></tr>
46 </table>
47 <dl>
48 <dt>你的用户名:</dt>
49 <dd ondblclick="ShowElement(this)">三人行团队</dd>
50 <dt>你的个性档</dt>
51 <dd ondblclick="ShowElement(this)">我闪故我在</dd>
52 </dl>
53 </body>
54 </html>
JQuery 双击动态编辑
时间: 2024-11-08 19:35:32
JQuery 双击动态编辑的相关文章
jQuery获取动态产生的html内标签或元素
下午分享<MVC编辑状态两个DropDownList联动>http://www.cnblogs.com/insus/p/3426563.html 不久,马上有网友问及三级联动的例子.Insus.NET回复他,会做二级联动,三级应该不难.原理与方法是一样的. 写此篇的目的,还是处理jQuery怎样获取动态产生后的html的标签或是元素.还是先回过头去看篇头指定的链接的文章.一开始时,Insus.NET使用了jQuery的ajax产生了一数据行,并append至 <tbody id=&quo
Jquery 实现动态添加table tr 和删除tr 以及checkbox的全选 和 获取添加TR删除TR后的数据
关于jquery实现动态添加table tr的问题我也不多说了 上面代码很多地方都有注释的 关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str=XXX | XXX | XXX , XXX | XXX | XXX , XXX | XXX | XXX 你也可以保存成对象类型的 我是为了方便后台的操作才这样做的 话不多说直接代码: <html> <head> <meta http-equiv="Content-Typ
Vue - 实现双击显示编辑框;自动聚焦点击的显示框;点击编辑框外的地方,隐藏编辑框
实现这三个功能的踩坑记录. 1. 需求 在Vue中,有一个input, 双击时编辑文本,点击该input节点外的其他地方,则取消编辑. 那么这里有三个要实现的地方 第一是双击显示编辑框. 第二是自动聚焦点击的显示框. 第三是点击编辑框外的地方,隐藏编辑框. 一二点都是在startPipeLineNameEdit这个method中去实现. 2. 实现双击显示编辑框 思路: 使用两个span包含双击前和双击后的代码,用isEditingPipeLineName这个变量去控制显示与否.(PipeLin
小谷实战Jquery(二)--可以编辑的表格
今天实现的是一个表格的例子,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格可以在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路很清晰,只是在实现的过程中会出现一些小bug.通过jQuery函数就可以一一解决. 下面看下HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
jQuery ajax 动态append创建表格出现不兼容ie8
很多情况下,通过js(jQuery1.10)动态来创建一些样式,对页面的动态交互来说是很方便的 但是不同的浏览器针对动态生成的不是很兼容,在此遇见的不兼容ie8,跟各位分享下 代码: json数据 data.json [{"name":"ajax","job":"manong"},{"name":"js","job":"diaosi"}] html
jQuery打造动态下滑菜单
作者:漫凯维奇 来源:[教程]jQuery打造动态下滑菜单 Tip:这只是一个转载,源代码可以在上面的来源博文中下载 此教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单.效果如下: 效果实现步骤如下: 1.HTML结构的实现,跟平常的菜单代码没有什么区别: <div id="menu" class="menu"> <ul> <li><a href="javascript:;">
jquery中动态新增的元素节点无法触发事件解决办法
在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法. 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“reply”,如果你用的是$(".reply").click(function(){ //do something... }),想必后面通过ajax加载进来的列表中的回复按钮,点击事件会失效. 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点lo
jQuery获取动态添加的元素,live和on的区别
今天给大家说一下如果用jQuery获取动态添加的元素,通常如果你在网页上利用jQuery添加一个元素,那么用平常的jQuery获取元素的方法无效的获取不到的.可以用以下的方法获取动态元素!假设我们现在需要获取网页动态添加的div元素,并绑定click事件! 在jQuery1.9版本以前,可以用live方法: $('div').live('click' function () { // }); 在jQuery1.9版本以后,live方法被删除,用on方法来代替: 如果你用这样使用on方法的话,那么
jquery.validate动态更改校验规则
有时候表单中有多个字段是相互关联的,以下遇到的就是证件类型和证件号码的关联,在下拉框中选择不同的证件类型,证件号码的值的格式都是不同的,这就需要动态的改变校验规则. 点击(此处)折叠或打开 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <m