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

 1 $(function() {
 2 //获取class为caname的元素
 3 $(".caname").click(function() {
 4 var td = $(this);
 5 var txt = td.text();
 6 var input = $("<input type=‘text‘value=‘" + txt + "‘/>");
 7 td.html(input);
 8 input.click(function() { return false; });
 9 //获取焦点
10 input.trigger("focus");
11 //文本框失去焦点后提交内容，重新变为文本
12 input.blur(function() {
13 var newtxt = $(this).val();
14 //判断文本有没有修改
15 if (newtxt != txt) {
16 td.html(newtxt);
17 /*
18 *不需要使用数据库的这段可以不需要
19 var caid = $.trim(td.prev().text());
20 //ajax异步更改数据库,加参数date是解决缓存问题
21 var url = "../common/Handler2.ashx?caname=" + newtxt + "&caid=" + caid + "&date=" + new Date();
22 //使用get()方法打开一个一般处理程序，data接受返回的参数（在一般处理程序中返回参数的方法 context.Response.Write("要返回的参数");）
23 //数据库的修改就在一般处理程序中完成
24 $.get(url, function(data) {
25 if(data=="1")
26 {
27 alert("该类别已存在！");
28 td.html(txt);
29 return;
30 }
31 alert(data);
32 td.html(newtxt);
33 });
34 */
35 }
36 else
37 {
38 td.html(newtxt);
39 }
40 });
41 });
42 });