使用Jquery实现点击文字后变成文本框且可修改
更新时间:2013年09月21日 11:35:40 作者:
使用Jquery实现点击文字变为文本框效果,可对文本框文字进行修改,具体的实现思路如下,感兴趣的朋友可以参考下,希望对大家有所帮助
使用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>
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的jQuery库中function的存在和参数问题
这篇文章主要介绍了JavaScript的jQuery库中function的存在和参数问题,包括function的参数传递和检测一个jQuery方法是否存在等,需要的朋友可以参考下2015-08-08基于jquery的一个OutlookBar类,动态创建导航条
初学jquery,如有错误,请高手们指出想看效果及完整代码的可以下载rar包2010-11-11
最新评论