JQuery 双击动态编辑
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("");
$(this).append(input);
$("input#temp").focus();
$("input").blur(function(){
if($(this).val()==""){
$(this).remove();
}else{
$(this).closest("td").text($(this).val());
}
});
})
})
function ShowElement(element)
{
var oldhtml = element.innerHTML;
var newobj = document.createElement('input');//创建新的input元素
newobj.type = 'text';//为新增元素添加类型
newobj.onblur = function(){
element.innerHTML = this.value ? this.value : oldhtml;//当触发时判断新增元素值是否为空，为空则不修改，并返回原有值
}
element.innerHTML = '';
element.appendChild(newobj);
newobj.focus();
}
</script>
</head>
<body>
<table border="1" width="200" id="table">
<tr><td>111</td></tr>
<tr><td>222</td></tr>
<tr><td>333</td></tr>
<tr><td>444</td></tr>
<tr><td>555</td></tr>
</table>
<dl>
<dt>你的用户名:</dt>
<dd ondblclick="ShowElement(this)">三人行团队</dd>
<dt>你的个性档</dt>
<dd ondblclick="ShowElement(this)">我闪故我在</dd>
</dl>
</body>
</html>
JQuery 双击动态编辑的更多相关文章
- 基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型及默认值
首先先推荐大家在看这篇笔记时,阅读过我写的这篇 Layui表格编辑[不依赖Layui的动态table加载] 阅读过上面那篇笔记之后呢,才能更好的理解我现在所要说的这个东西 接下来废话不多说,上代码. ...
- Jquery 实现动态加入table tr 和删除tr 以及checkbox的全选 和 获取加入TR删除TR后的数据
关于jquery实现动态加入table tr的问题我也不多说了 上面代码非常多地方都有凝视的 关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str= ...
- Vue - 实现双击显示编辑框；自动聚焦点击的显示框；点击编辑框外的地方，隐藏编辑框
实现这三个功能的踩坑记录. 1. 需求 在Vue中,有一个input, 双击时编辑文本,点击该input节点外的其他地方,则取消编辑. 那么这里有三个要实现的地方 第一是双击显示编辑框. 第二是自动聚 ...
- [转]jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
- jquery双击事件
<html> <head><meta http-equiv="Content-Type" content="text/html; chars ...
- Jquery Mobile 动态添加元素然后刷新 转
Jquery Mobile 动态添加元素然后刷新 (2013-05-09 12:39:05) 转载▼ 标签: it 分类: Mobile jquery 表单元素每一个元素都有自己刷新的方法,每当改变它 ...
- 【jQuery Demo】jQuery打造动态下滑菜单
作者:漫凯维奇 来源:[教程]jQuery打造动态下滑菜单 Tip:这只是一个转载,源代码可以在上面的来源博文中下载 此教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单.效果如 ...
- 一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
随机推荐
- MySQL性能优化的最佳20+条经验(转)
今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序 员需要去关注的事情.当我们去设计数据库表结构,对操作数 ...
- <context:annotation-config/>、<context:component-scan/>
在基于主机方式配置Spring的配置文件中,你可能会见到<context:annotation-config/>这样一条配置,他的作用是式地向 Spring 容器注册 AutowiredA ...
- CentOS6.8 SVN服务器管理多项目
一 需求 一般来说,公司有多个项目,在搭建好SVN服务器之后,就需要使用SVN来实现不在一个项目中的开发人员不能访问其它项目中的代码. 假设: 有3个项目:project1.project2.proj ...
- [腾讯 TMQ] 零基础学习 Fiddler 抓包改包
本文转载于https://testerhome.com/topics/7159 一.Fiddler1.1.简介Fiddler是一款HTTP协议调试代理工具,它能够抓取记录本机所有HTTP(S)请求,通 ...
- AVCaptureSession
AVCaptureSession用来控制来自一个输入设备(AVCaptureDeviceInput)的声音和视频,流入一个输出缓冲区(AVCaptureOutput)的过程. 建立一个AVCaptur ...
- python--pipe
1.pipe 除了使用队列外,还可以使用管道在进程间执行消息传递 pipe([]duplex) 在进程间创建一条管道,并返回元组(conn1,conn2),其中conn1和conn2是表示管道两端的C ...
- 非常easy学习的JQuery库 : (二) 选择器
作用 选择器同意您对元素组或单个元素进行操作. 在前面的章节中,我们介绍了一些有关怎样选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是怎样准确地选取您希望应用效果的元素. jQuer ...
- lua学习笔记（二）
开始 程序块chunk 交互模式里输入的一行代 一个文件里的代码 也就是一连串的语句或命令 连续的lua语句之间不需要分隔符,但也可以使用分号,如果你愿意的话 ...
- 启动spring boot 异常
再我搭建spring boot工程后,run application的时候抛出下面异常 Exception /slf4j-log4j12-.jar). If you are using WebLogi ...
- 在集群中使用文件加载graph
从hdfs上加载文件并创建graph scala> var graphs = GraphLoader.edgeListFile(sc,"/tmp/dataTest/graphTest. ...