使用Jquery实现点击文字后变成文本框且可修改


Posted in Javascript onSeptember 21, 2013

使用Jquery实现点击文字变为文本框效果,可对文本框文字进行修改。

1.点击文字变为文本框
2.文本框自动全选文字
3.对文本框内容进行修改
4.点击文本框以外的地方文本框再次变为修改后的文字
5.同步更新SQL数据库内容

Html部分代码

<table width="200"> 
<tr> 
<td><b>ID</b></td> 
<td><b>名称</b></td> 
<td><b>操作</b></td> 
</tr> 
<tr> 
<td><b>1</b></td> 
<td class="caname"><b>哈哈</b></td> 
<td><b>删除</b></td> 
</tr> 
<tr> 
<td><b>2</b></td> 
<td class="caname"><b>哈哈</b></td> 
<td><b>删除</b></td> 
</tr> 
<tr> 
<td><b>3</b></td> 
<td class="caname"><b>哈哈</b></td> 
<td><b>删除</b></td> 
</tr> 
</table>

新建edit.js文件,代码如下
$(function() { 
//获取class为caname的元素 
$(".caname").click(function() { 
var td = $(this); 
var txt = td.text(); 
var input = $("<input type='text'value='" + txt + "'/>"); 
td.html(input); 
input.click(function() { return false; }); 
//获取焦点 
input.trigger("focus"); 
//文本框失去焦点后提交内容,重新变为文本 
input.blur(function() { 
var newtxt = $(this).val(); 
//判断文本有没有修改 
if (newtxt != txt) { 
td.html(newtxt); 
/* 
*不需要使用数据库的这段可以不需要 
var caid = $.trim(td.prev().text()); 
//ajax异步更改数据库,加参数date是解决缓存问题 
var url = "../common/Handler2.ashx?caname=" + newtxt + "&caid=" + caid + "&date=" + new Date(); 
//使用get()方法打开一个一般处理程序,data接受返回的参数(在一般处理程序中返回参数的方法 context.Response.Write("要返回的参数");) 
//数据库的修改就在一般处理程序中完成 
$.get(url, function(data) { 
if(data=="1") 
{ 
alert("该类别已存在!"); 
td.html(txt); 
return; 
} 
alert(data); 
td.html(newtxt); 
}); 
*/ 
} 
else 
{ 
td.html(newtxt); 
} 
}); 
}); 
});

Html头部引用jq类库文件和自己写的edit.js文件,注意顺序
<script src="../js/jquery.js" type="text/javascript"></script> 
<script src="../js/edit.js" type="text/javascript"></script>
Javascript 相关文章推荐
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
深入理解javascript变量声明
Nov 20 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
javascript三种代码注释方法
Jun 02 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 #Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 #Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 #Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 #Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 #Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 #Javascript
script不刷新页面的联动前后代码
Sep 18 #Javascript
You might like
php防止网站被攻击的应急代码
2015/10/21 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
会计专业个人求职信范文
2014/01/08 职场文书
新娘父亲婚礼致辞
2014/01/16 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
火灾现场处置方案
2014/05/28 职场文书
离婚上诉状范文
2015/05/23 职场文书
高一作文之乐趣
2019/11/21 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript