使用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 相关文章推荐
javaScript - 如何引入js代码
Mar 09 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
js实现延迟加载的方法
Jun 24 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 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
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
深入理解Python中的元类(metaclass)
2015/02/14 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
处理textarea中的换行和空格
2019/12/12 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
中文教师求职信
2014/02/22 职场文书
安全生产责任书范本
2014/04/15 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers