模仿QQ空间布局时，为了模拟好友分组编辑部分，大量搜集js代码，经过多重比较和修改，终于提炼到了我目前为止遇到的比较实用的脚本了，其中我中意的优点：无需id定义，只定义类就可以，，代码简便，尤其适用后台，因为，朋友已成功运用于后台交互中，先提供代码，做个标记（PS：忘记从哪里下载的JS源码，但十分感谢作者大神。。。感谢。。。）
<script>
$(function() {
//获取class为caname的元素
$(".t2").click(function() {
var td = $(".t1");
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);
}
});
});
});
/*
document.getElementById("click1").onclick=function(){
var text=document.getElementById("t1");
var val=text.innerHTML;
text.innerHTML="<input type=‘text‘ id=‘m‘ value="+val+" />";
document.getElementById("m").addEventListener("blur",function(e){
text.innerHTML=document.getElementById("m").value;
});
};
*/
</script>
body部分，未做css定义，效果可实现：
<span class="t1">默认分组</span>
<a class="t2">编辑</a>
<p>说明：点击编辑，可修改默认分组的文字内容</p>
任意加载一个jQuery插件
点击使文字变文本框且可编辑的JS,布布扣,bubuko.com
原文地址：http://www.cnblogs.com/yaoyao89429/p/3805140.html
