使用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 相关文章推荐
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
使用JS读秒使用示例
Sep 21 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
详解如何让Express支持async/await
Oct 09 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 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
PHP4引用文件语句的对比
2006/10/09 PHP
php实现jQuery扩展函数
2009/10/30 PHP
php set_time_limit()函数的使用详解
2013/06/05 PHP
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
js和as的稳定传值问题解决
2013/07/14 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
python使用PyGame模块播放声音的方法
2015/05/20 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
Django中Forms的使用代码解析
2018/02/10 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
使用Python实现分别输出每个数组
2019/12/06 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
大学生党课思想汇报
2013/12/29 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
四年级数学教学反思
2014/02/02 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
财务人员个人工作总结
2015/02/27 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
施工现场安全管理制度
2015/08/05 职场文书