用jq更改html中文字,使用Jquery实现点击文字后变成文本框且可修改

使用Jquery实现点击文字变为文本框效果，可对文本框文字进行修改。

1.点击文字变为文本框

2.文本框自动全选文字

3.对文本框内容进行修改

4.点击文本框以外的地方文本框再次变为修改后的文字

5.同步更新SQL数据库内容

Html部分代码

. 代码如下:

ID	名称	操作
1	哈哈	删除
2	哈哈	删除
3	哈哈	删除

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

. 代码如下:

$(function() {

//获取class为caname的元素

$(".caname").click(function() {

var td = $(this);

var txt = td.text();

var input = $("");

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文件，注意顺序

. 代码如下: