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使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jquery轮播图插件使用方法详解
Jul 31 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
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
python定时器(Timer)用法简单实例
2015/06/04 Python
Python导入oracle数据的方法
2015/07/10 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
python:接口间数据传递与调用方法
2018/12/17 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
密封类可以有虚函数吗
2014/08/11 面试题
生产经理的自我评价分享
2013/11/07 职场文书
党员思想汇报材料
2014/12/19 职场文书
2015年人事科工作总结
2015/04/28 职场文书
检讨书范文大全
2015/05/07 职场文书
责任书范本大全
2015/05/11 职场文书
护士岗位竞聘书
2015/09/15 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
2016年端午节寄语
2015/12/04 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
详解Python requests模块
2021/06/21 Python