利用jQuery實作可以編輯的表格_jquery

今天學習了利用jQuery實作可以編輯的表格這個例子。這個範例需求是這樣的：在前台的表格中點選儲存格便可修改其中的內容，回車鍵儲存修改的內容，esc撤銷儲存的內容。原則：按一下客戶端表格儲存格時，在儲存格中新增一個文字框，並將儲存格中原來的內容賦值給文字方塊，再進一步去修改文字方塊內容，修改後將文字方塊內容重新賦值給單元格。

原始碼：

前台程式碼：

複製程式碼

複製程式碼

程式碼如下


BR>






--%>

滑鼠點擊表格項目就可以編輯
學號	姓名
000001	張三
000002	李四
000003	王五
000004	趙六 td>

css代碼：複製程式碼

程式碼如下:body {
}
table {
border:1px solid #000000;
border-collapse:collapse;/*單元格邊框合併*/
width:400px;
}
width:400px;
}
table td {
border:1px solid #000000;
width:50%;
}
table th {
border:1px solid #0000000; %;
}
tbody th {
background-color:#426fae;
}

jquery代碼

複製程式碼

程式碼如下:

$(function () {
//找到表格中除了第一個tr以外的所有偶數行
//使用even為了透過tbody tr傳回所有tr元素
$( "tbody tr:even").css("background-color", "#ece9d8");
//找到所有的學號單元格
var numId = $("tbody td:even");

//給儲存格註冊滑鼠點擊事件
numId.click(function () {
//找到對應目前滑鼠點擊的td，this對應的就是回應了click的那個td
var tdObj = $(this);
//判斷td中是否有文字方塊
if (tdObj.children("input").length>0) {
return false;
}
//取得表格中的內容
var text = tdObj.html();
//清空td中的內容
tdObj.html("");
//創建文字方塊
//去掉文字方塊的邊框
//設定文字方塊中字型與表格中的文字大小相同。 //是文字方塊的寬度和td的寬度相同
//並將td中值放入文字方塊
//將文字方塊插入td中
var inputObj = $("").css("border-width", "0").css("font-size", tdObj.css("font-size")).css("background-color", tdObj.css("background-color")).width(tdObj.width()).val(text).appendTo(tdObj);
//文字方塊插入後先取得焦點、後選取
inputObj .trigger("focus").trigger("select")
//文字方塊插入後不能被觸發點選事件
inputObj.click(function () {
return false;
} );
//處理文字方塊上回車和esc按鍵的操作
inputObj.keyup(function (event) {
//取得目前按下鍵盤的鍵值
var keycode = event .which;
//處理回車的情況
if (keycode==13) {
//取得目前文字方塊中的內容
var inputtext = $(this).val() ;
//將td中的內容修改為文字方塊的內容
tdObj.html(inputtext);
}
//處理esc的內容
if (keycode==27) {
//將td中的內容還原成原來的內容
tdObj.html(text);
}
});
});
});


總結：透過此實例的學習能獲得的知識點：

一、html方面

1.table中可以包含thead和tbody

2.表頭的內容中可以放th中

3.table{}這種寫法稱作標籤選擇器，可以對整個table產生影響。

4.table td{}這種寫法表示table中所包含的所有td。

二、jquery方面

$()的括號中可以放4種不同的參數

1.參數直接放function,表示頁面載入完成：例如上述範例中jquery程式碼中的第1行$(function(){})

2.參數可以是css類別選擇器，並包裝成jquery物件。例如：上述範例中jquery程式碼的第4行$(“tbody tr:even”)

3.參數如果是html文本，可以建立dom節點，並包裝成jquery物件。例如：上述例子中jquery程式碼的第27行$("")

4.參數可以是dom對象，這個方法相當於吧dom物件裝換成jquery對象。上述例子jquery程式碼的第11行var tdObj = $(this)

本範例中的jquery物件

1.jquery物件後面加css屬性，可以設定節點的css屬性。例如上述範例中jquery程式碼中的第4行$("tbody tr:even").css("background-color", "#ece9d8");

2.jquery物件內容包含了選擇器對應的dom節點，以數組保存。

3.jquery物件後面加html方法可以設定或取得節點的html內容。例如上述範例中jquery程式碼中的第17行var text = tdObj.html()

4.jquery物件後面加val方法，可以取得或設定節點的value值。例如上述例子中jquery程式碼中第41行var inputtext = $(this).val()

5.jquery物件後面加width方法,可以設定或取得某個節點的寬度。例如上述例子中jquery程式碼中第27行tdObj.width()

6.jquery物件後面加apppendTo方法可以將一個節點追加到另一個節點所有子節點後面。例如上述例子jquery程式碼中第27行appendTo(tdObj)

7.jquery物件後面加trigger方法可以出發某個js事件發生。例如上述例子中jquery程式碼中第29行inputObj.trigger("focus").trigger("select")

8.jquery物件後面加上children方法可以獲得某個節點的子節點，可以製定參數來限制子節點的內容。例如上述範例中jquery程式碼中第13行tdObj.children("input").length

9.如果選擇器傳回的jquery物件中包含多個dom節點，在這個物件上註冊類似click事件，所有dom節點都會用於此事件。例如上述例子中jquery程式碼中第9行numId.click；