新的一天開始了，生活還要繼續，今天要和大家分享的是不一樣的table，普通的table就用於顯示數據，今天要分享的table不僅僅能顯示數據，還可以對數據進行編輯，當鼠標點擊數據時相應的數據格就變成可編輯的狀態，廢話不多說，進入今天的主題，首先完成HTML頁面：
. 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQueryProject1</title>
<meta name="author" content="Frank_Ren" />
<link type="text/css" rel="stylesheet" href="css/myCSS.css" />
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" language="JavaScript" src="js/myJSFile.js"></script>
<!-- Date: 2012-09-17 -->
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">鼠標點擊下列內容可以進行編輯</th>
</tr>
</thead>
<tbody id="content">
<tr>
<th>學號</th>
<th>姓名</th>
</tr>
<tr>
<td>000001</td>
<td>張三</td>
</tr>
<tr>
<td>000002</td>
<td>李四</td>
</tr>
<tr>
<td>000003</td>
<td>王五</td>
</tr>
<tr>
<td>000004</td>
<td>趙六</td>
</tr>
</tbody>
</table>
</body>
</html>
沒錯現在它還是一個普通的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: 25px;
}
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 changeToEdit(node){
node.html("");
var inputObj = $("<input type='text'/>");
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){
node.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 = $("<input type='text'/>"); 這一句生成一個可編輯的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，不妨動手試一試。謝謝你耐心的讀完本文，希望對你會有所幫助。