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 ...
随机推荐
- 在Java中怎样高效的推断数组中是否包括某个元素
来自 http://www.hollischuang.com/archives/1269? 怎样检查一个数组(无序)是否包括一个特定的值?这是一个在Java中经经常使用到的并且非常实用的操作.同一时候 ...
- Python基础之迭代器
迭代器的优点: 1.可以使用for循环遍历: 2.可以节省内存空间: 3.可以有序的访问集合(set)数据结构内的元素. 迭代器的缺点: 只能向前,不能后退. 可迭代对象与不可迭代对象: 可迭代对象: ...
- 开发中可能会用到的几个小tip----QT, pycharm, android, 等
QT: 如果是在windows下开发的话,添加外部库,外部包含头文件路径的时候,要注意用相对路径,或者在项目上右键添加外部库的路径或者头文件路径,否则,会卡在这里开始怀疑人生... 如果是在linux ...
- do{}while(0)与CC_BREAK_IF的绝妙搭配
从一開始认为没有必要,到认为很好用.我经历了大概两个月的时间,以下来总结一下什么情况下使用这样的结构吧. 第一种情况:当载入文件的时候,假设载入文件失败,须要报错的时候. 当前,能够用try{}cat ...
- SO_KEEPALIVE
if tcp_keepalive: # 启用KeepAlive选项 sock.setsockopt(socket.SOL_SOCKET, socket.SO_KEEPALIVE, 1) # TCP_K ...
- Ubuntu 18.04 初始化（server版本 ）
系统安装 ubuntu 18.04 英文版,创建个人用户 初始系统 a.修改ip shell> vim /etc/network/interfaces auto ens33 iface ens3 ...
- TBSchedule源码阅读1-TBScheduleManagerFactory
TBSchedule 1 TBScheduleManagerFactory 初始化 成员变量 ZKManager; IScheduleDataManager; Schedule ...
- linux下nginx安装php
把php安装包上传到linux的/usr/local/src 1.解压 cd /usr/local/src tar zxvf php-5.6.9.tar.gz cd php-5.6.9 2.编译安装 ...
- elipse开发环境搭建（Java+C++）
目的:搭建可用于java和C++开发的eclipse开发环境. 步骤: 1.安装JDK(Java Development Kit):JDK包含了java掩饰程序和样例.Java公共API类的源代码.J ...
- GridView 显示行号 设置行号列的宽度
/// <summary> /// GridView 显示行号 设置行号列的宽度 /// </summary> /// <param name="gv" ...