模仿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插件