提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery 实现 使用 修改 文字 点击 变成 文本框
2023-06-13 09:15:05 时间
使用Jquery实现点击文字变为文本框效果，可对文本框文字进行修改。

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

Html部分代码
复制代码代码如下:

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

新建edit.js文件，代码如下
复制代码代码如下:

$(function(){
//获取class为caname的元素
$(".caname").click(function(){
vartd=$(this);
vartxt=td.text();
varinput=$("<inputtype="text"value=""+txt+""/>");
td.html(input);
input.click(function(){returnfalse;});
//获取焦点
input.trigger("focus");
//文本框失去焦点后提交内容，重新变为文本
input.blur(function(){
varnewtxt=$(this).val();
//判断文本有没有修改
if(newtxt!=txt){
td.html(newtxt);
/*
*不需要使用数据库的这段可以不需要
varcaid=$.trim(td.prev().text());
//ajax异步更改数据库,加参数date是解决缓存问题
varurl="../common/Handler2.ashx?caname="+newtxt+"&caid="+caid+"&date="+newDate();
//使用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文件，注意顺序
复制代码代码如下:
<scriptsrc="../js/jquery.js"type="text/javascript"></script>
<scriptsrc="../js/edit.js"type="text/javascript"></script>

相关文章