jQuery 实现双击编辑表格功能
更新时间：2017年06月19日 14:58:49 作者：纸上得来终觉浅-绝知此事要躬行
本文通过实例代码给大家介绍了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 mobile，可以很容易实现幻灯播放效果，摆脱繁杂的步骤轻松实现，接下来介绍，有需要的朋友可以参考下2013-01-01
在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着学习如何管理jQuery包装集, 比如添加,删除,切片等.2011-02-02
这篇文章主要介绍了jquery如何实现点击消失,需要的朋友可以参考下2014-03-03
这篇文章主要介绍了jQuery实现页面滚动时动态加载内容的方法,实例分析了jQuery实现动态加载页面的技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了jQuery中slice()方法用法,实例分析了slice()方法的功能、定义及选取匹配元素集子集的使用技巧,需要的朋友可以参考下2015-01-01
下面小编就为大家带来一篇jQuery ajax读取本地json文件的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
大家都知道map()方法主要用来遍历操作数组和对象，这篇文章将给大家详细介绍关于jQuery遍历map()方法的内容，文章给出了详细的示例代码，对大家的理解和学习很有帮助，有需要的朋友们下面来一起学习学习吧。2016-11-11
在2016年6月迎来了jquery3.0最终版，jquery3.0有哪些新特征呢？很多朋友不是很清楚，下面小编给大家带来了jQuery 3.0十大新特性，感兴趣的朋友一起看下吧2016-07-07
JQuery 改变页面字体大小的实现代码(实时改变网页字体大小)
分别定义三个class为increaseFont、decreaseFont、resetFont 的元素。为其click事件添加事件2012-03-03
要实现一个简单的列表，右上角有一个检索功能我们要实现的是列表检索功能，具体实例代码大家参考下本文2017-07-07
最新评论