使用Jquery實作點擊文字後變成文字方塊且可修改_jquery

使用Jquery實現點擊文字變成文字方塊效果，可對文字方塊文字進行修改。

1.點選文字變成文字方塊
2.文字方塊自動全選文字
3.修改文字方塊內容
4.點選文字方塊以外的地方文字方塊再次變為修改後的文字
5.同步更新SQL數據庫內容

Html部分代碼

複製代碼 程式碼如下:

ID	名稱	操作
1	哈哈	刪除
2	哈哈	刪除
3 b>	哈哈	刪除

新建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文件，注意順序

複製程式碼 程式碼如下: