一樣的table？不一樣的table(可編輯狀態table)_jquery

新的一天開始了，生活還要繼續，今天要和大家分享的是不一樣的table，普通的table就用於顯示數據，今天要分享的table不僅能顯示數據，還可以對數據進行編輯，當滑鼠點選資料時對應的資料格就變成可編輯的狀態，廢話不多說，進入今天的主題，先完成HTML頁面：

複製程式碼 程式碼如下:

滑鼠點選下列內容可以編輯
學號	姓名
000001	張三
000002	李四
000003	王五
000004	趙六

沒錯現在它還是一個普通的table，一點樣式都還沒有，為了讓這個table顯得不那麼抽象，接下來為它引入CSS樣式

複製程式碼 程式碼如下:

table{
width:400px;
height: 150px;
table , table td, table th{
border:1px solid black;
border-collapse: collapse;
}
table td{
width:50%
height: td{
width:50%
;
}
thead th{
background-color:#87CEFA;
}
tbody th{
background-color:#FFFACD;
}

在HTML頁面中可編輯的頁面元素就只有那麼幾個，很不幸table並不是其中一個，為了讓table變得可編輯，就要向table中插入可編輯的頁面元素，再用CSS裝飾一下，讓它看起來還是一個普通的table，然而卻具備了可編輯的功能，這就是JS所要完成的功能，JS程式碼如下： 複製程式碼

程式碼如下:


$(function(){
var content;
$("#content tr:odd").css(" background-color","#D2B48C");
$("#content tr:even").css("background-color","#C0C0C0");
$("#content td") .click(function(){
var clickObj = $(this);
content = clickObj.html();
changeToEdit(clickObj);
});
function changeEdit(nodede) ){
node.html("");
var inputObj = $("");
inputObj.css("border","0"). css("background-color",node.css("background-color"))
.css("font-size",node.css("font-size")).css("height"," 20px")
.css("width",node.css("width")).val(content).appendTo(node)
.get(0).select();
inputObj. click(function(){
return false;
}).keyup(function(event){
var keyvalue = event.which;
if(keyvalue==13){
nodede .html(node.children("input").val());
}
if(keyvalue==27){
node.html(content);
}
} ).blur(function(){
if(node.children("input").val()!=content){
if(confirm("是否儲存修改後的內容？ ","Yes","No")){
node.html(node.children("input").val());
}else{
node.html(content);
}
}else{
node.html(content);
}
});
}

});
接下來對這段JS做簡單的分析，全域變數var content 用來保存編輯之前表格中的內容，有時候使用者對表格進行編輯了但卻不想保存編輯後的結果，就需要將表格中的內容還原到編輯之前，所以當滑鼠點擊的時候首先要將表格的內容儲存起來。

下面這兩句$("#content tr:odd").css("background-color","#D2B48C"); $("#content tr:even").css("background -color","#C0C0C0"); 是讓table具備隔行變色，只是為了增加表格的可視性。 var inputObj = $(""); 這句話產生一個可編輯的JQuery對象，也就是要插入表格中的可編輯元素，後面那一串.css()方法是給inputObj物件追加CSS樣式，.css()方法不只可以為某個物件設定CSS樣式還可以取得某個物件的CSS樣式，JQuery中提供了許多這樣的方法。很多時候JQuery方法執行過後回傳回來的還是JQuery對象，所以就出現了inputObj.css().css().css()....這樣的寫法。

appendTo()方法就實現了表格的可編輯性（也可用appendix()），將可編輯元素插入到表格中。 .get(0).select()這兩個方法是為了選取inputObj中的內容讓焦點落在可編輯元素上，需要注意的是這兩個方法一定要寫在appendTo()之後，inputObj.click( function(){})這個方法也是不可或缺的，刪掉這個方法會有一個很有趣的bug，大家可以試試看。

緊接著的keyup(function(event){})，可以用event.which 的方式取得鍵盤按下的鍵所對應的鍵值，常用的鍵值有Enter鍵:13、Esc鍵:27，當使用者按下Enter鍵時，就儲存編輯後的內容，並將表格還原成普通表格，當使用者按下Esc鍵時，將表格中的內容還原，也將表格還原成普通表格。

使用者體驗，蘋果的出現讓這個詞更深入人心，這裡也湊下熱鬧。為了提高使用者體驗這裡增加了blur(function(){})方法，當焦點離開可編輯元素時首先判斷表格中的內容是否被改變，如果沒有改變直接將表格及表格中的還原，如果有改變就提示使用者是否儲存。

今天的範例基本上完成了，如果你將JS程式碼放在一個單獨的JS檔中引用，可能會出現一個中文亂碼的bug，不妨動手試試。謝謝你耐心的讀完本文，希望對你會有幫助。