jQuery 实现双击编辑表格功能


Posted in jQuery onJune 19, 2017

先给大家展示下效果图:

jQuery 实现双击编辑表格功能

下面用简单方法实现的简单表格编辑功能:

简单的HTML代码略过了,下面是js实现过程

JavaScript:

<span style="font-size:18px;">$(".tables").on("dblclick","td",function(){ 
 if($(this).children("input").length>0){ 
  return false; 
 } 
 var tdDom = $(this); 
 //保存初始值 
 var tdPreText = $(this).text(); 
 //给td设置宽度和给input设置宽度并赋值 
 $(this).width(100).html("<input type='text'>").find("input").width(100).val(tdPreText); 
 //失去焦点的时候重新赋值 
 var inputDom = $(this).find("input"); 
 inputDom.blur(function(){ 
  var newText = $(this).val(); 
  $(this).remove(); 
  tdDom.text(newText); 
 });</span>

以上所述是小编给大家介绍的jQuery 实现双击编辑表格功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
jQuery实现简单的手风琴效果
Apr 17 #jQuery
jQuery自定义多选下拉框效果
Jun 19 #jQuery
jQuery实现下拉菜单的实例代码
Jun 19 #jQuery
jquery DataTable实现前后台动态分页
Jun 17 #jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 #jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 #jQuery
jQuery序列化后的表单值转换成Json
Jun 16 #jQuery
You might like
php5.2时间相差8小时
2007/01/15 PHP
PHP中的string类型使用说明
2010/07/27 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
python数据结构之二叉树的遍历实例
2014/04/29 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
Python判断有效的数独算法示例
2019/02/23 Python
python版百度语音识别功能
2019/07/09 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
优秀教师主要事迹
2014/02/01 职场文书
分家协议书
2014/04/21 职场文书
建筑工地质量标语
2014/06/12 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
微信早安问候语
2015/11/10 职场文书
教师师德承诺书2016
2016/03/25 职场文书
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android