使用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 相关文章推荐
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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
建立动态的WML站点(三)
2006/10/09 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
php事务处理实例详解
2014/07/11 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
php把数组值转换成键的方法
2015/07/13 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
Python数据类型详解(一)字符串
2016/05/08 Python
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
Python中pillow知识点学习
2018/04/30 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
计算机专业毕业生自我鉴定
2014/01/16 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
银行开业庆典方案
2014/02/06 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
个人售房合同协议书
2016/03/21 职场文书