今天學習了利用jQuery實作可以編輯的表格這個例子。這個範例需求是這樣的：在前台的表格中點選儲存格便可修改其中的內容，回車鍵儲存修改的內容，esc撤銷儲存的內容。原則：按一下客戶端表格儲存格時，在儲存格中新增一個文字框，並將儲存格中原來的內容賦值給文字方塊，再進一步去修改文字方塊內容，修改後將文字方塊內容重新賦值給單元格。
原始碼：
前台程式碼：
複製程式碼
程式碼如下
BR>
jq2—可以編輯的表格 --%>
程式碼如下: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；
