jQuery一步一步實現跨瀏覽器的可編輯表格，支援IE、Firefox、Safari

maqianmaqian發表於2010-11-30
jQuery瀏覽器Firefox

在修改資料時，有時候為了方便，我們希望能夠直接在表格裡面對資料進行直接修改。
-
要實現可編輯的表格功能，我們要解決以下問題：
1.明確要修改的資料在表格中是哪些列（如何找到這些單元格）;
2.如何讓單元格變成可以編輯的;
3.如何處理單元格的一些按鍵事件;
4.解決跨瀏覽器問題。
我們通過jQuery可以一步一步解決上述問題。
一、 繪製表格
首先我們先畫好一個表格。
Code1:
複製程式碼 程式碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery的跨瀏覽器可編輯表格</title>
<link rel="stylesheet" type="text/css" href="css/editTable.css" media="all"/>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/editTable.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">滑鼠點選表格就可以編輯</th>
</tr>
</thead>
<tbody>
<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>

畫好表格以後顯示的如圖：
editTable01.jpg
 
很明顯它看起來不像一個表格，既沒有邊框，而且很醜。那麼我們先給這個表格設定一些樣式。
Code2:
複製程式碼 程式碼如下:
body{}{
font-size: 14px;
}
table{}{
color: #4F6B72;
border: 1px solid #C1DAD7;
border-collapse: collapse;
width: 400px;
}
th{}{
width: 50%;
border: 1px solid #C1DAD7;
}
td{}{
width: 50%;
border: 1px solid #C1DAD7;
}

現在效果好多了：
editTable02.jpg
 
但是單元格和單元格之間還是有重疊的邊框，只需要在標籤選擇符table中加上這樣一個屬性就能去除重複邊框：
border-collapse: collapse;
複製程式碼 程式碼如下:
table{}{
color: #4F6B72;
border: 1px solid #C1DAD7;
border-collapse: collapse;
width: 400px;
}

editTable03.jpg

二、 讓表格的單元格變成可編輯的列
繪製好表格以後，我們選取表格中的編號列作為可編輯的列。要讓這一列的單元格能夠被編輯，就需要在這些列中插入文字框，我們通過這一列單元格的onclick事件來插入文字框。
Code3:
複製程式碼 程式碼如下:
$(document).ready(function(){
//找到學號這一列的所有單元格
//因為學號這一列的單元格在所有td中的位置是偶數（0,2,4,6），所以通過even就可以篩選到td中偶數位的單元格
var numTd = $("tbody td:even");
//單擊這些td時，建立文字框
numTd.click(function(){
//建立文字框物件
var inputobj = $("<input type='text'>");
//獲取當前點選的單元格物件
var tdobj = $(this);
//去除文字框的border
inputobj.css("border","0");
//讓文字框和單元格的寬度保持一致
inputobj.width(tdobj.width());
//讓文字框的字型和單元格的字型大小一樣
inputobj.css("font-size",tdobj.css("font-size"));
//讓文字框和單元格的字型保持一致
inputobj.css("font-family",tdobj.css("font-family"));
//讓文字框和單元格的背景保持一致
inputobj.css("background-color",tdobj.css("background-color"));
//appendTo方法把文字框新增到td中
inputobj.appendTo(tdobj);
});
});

現在已經把文字框插入到單元格中了。既然要編輯文字框，文字框就應該有值，文字框的值來源於單元格中的資料，並且我們要清空單元格中原有的資料。
Code4:
複製程式碼 程式碼如下:
$(document).ready(function(){
//找到學號這一列的所有單元格
//因為學號這一列的單元格在所有td中的位置是偶數（0,2,4,6），所以通過even就可以篩選到td中偶數位的單元格
var numTd = $("tbody td:even");
//單擊這些td時，建立文字框
numTd.click(function(){
//建立文字框物件
var inputobj = $("<input type='text'>");
//獲取當前點選的單元格物件
var tdobj = $(this);
//獲取單元格中的文字
var text = tdobj.html();
//清空單元格的文字
tdobj.html("");
//去除文字框的border
inputobj.css("border","0");
//讓文字框和單元格的寬度保持一致
inputobj.width(tdobj.width());
//讓文字框的字型和單元格的字型大小一樣
inputobj.css("font-size",tdobj.css("font-size"));
//讓文字框和單元格的字型保持一致
inputobj.css("font-family",tdobj.css("font-family"));
//讓文字框和單元格的背景保持一致
inputobj.css("background-color",tdobj.css("background-color"));
inputobj.css("color","#C75F3E");
//給文字框賦值
inputobj.val(text);
//appendTo方法把文字框新增到td中
inputobj.appendTo(tdobj);
});
});

但是以上程式碼看起來非常的繁瑣，jQuery有一個非常好的優點，就是它的程式碼連綴。上面的程式碼可以通過連綴進行簡化：
Code5:
複製程式碼 程式碼如下:
$(document).ready(function(){
//找到學號這一列的所有單元格
//因為學號這一列的單元格在所有td中的位置是偶數（0,2,4,6），所以通過even就可以篩選到td中偶數位的單元格
var numTd = $("tbody td:even");
//單擊這些td時，建立文字框
numTd.click(function(){
//建立文字框物件
var inputobj = $("<input type='text'>");
//獲取當前點選的單元格物件
var tdobj = $(this);
//獲取單元格中的文字
var text = tdobj.html();
//清空單元格的文字
tdobj.html("");
inputobj.css("border","0")
.css("font-size",tdobj.css("font-size"))
.css("font-family",tdobj.css("font-family"))
.css("background-color",tdobj.css("background-color"))
.css("color","#C75F3E")
.width(tdobj.width())
.val(text)
.appendTo(tdobj);
});
});

現在表格中已經成功的插入了文字框，可以對單元格進行編輯了。
editTable04.jpg
 
但是有個明顯的bug,當你再次點選同一個單元格時，會出現如下效果：
editTable05.jpg

 

 
是什麼原因造成上面這個bug呢？因為在文字框中插入單元格之後，文字框是屬於單元格的，我們點選文字框時，同樣會觸發單元格的click事件。
我們需要阻止文字框的點選行為（阻止事件冒泡）。
Code6:


複製程式碼 程式碼如下:
inputobj.click(function(){
return false;
});

但是點選單元格的邊框時，還是會出現上述的bug,那我們做如下判斷：如果單元格中已經插入了文字框，就跳出click事件。
Code7:
複製程式碼 程式碼如下:
$(document).ready(function(){
//找到學號這一列的所有單元格
//因為學號這一列的單元格在所有td中的位置是偶數（0,2,4,6），所以通過even就可以篩選到td中偶數位的單元格
var numTd = $("tbody td:even");
//單擊這些td時，建立文字框
numTd.click(function(){
//建立文字框物件
var inputobj = $("<input type='text'>");
//獲取當前點選的單元格物件
var tdobj = $(this);
//獲取單元格中的文字
var text = tdobj.html();
//如果當前單元格中有文字框，就直接跳出方法
//注意：一定要在插入文字框前進行判斷
if(tdobj.children("input").length>0){
return false;
}
//清空單元格的文字
tdobj.html("");
inputobj.css("border","0")
.css("font-size",tdobj.css("font-size"))
.css("font-family",tdobj.css("font-family"))
.css("background-color",tdobj.css("background-color"))
.css("color","#C75F3E")
.width(tdobj.width())
.val(text)
.appendTo(tdobj);
inputobj.get(0).select();
//阻止文字框的點選事件
inputobj.click(function(){
return false;
});
});
});

上面的bug解決了，但是我發現，點選單元格時，雖然從表面上看文字是變了色，但沒有讓我覺得它是能被編輯的。那麼我就做一點點的改動，插入文字框的同時，選中文字框的文字。
Code 8:
複製程式碼 程式碼如下:
inputobj.get(0).select();

但是問題又來了，在Safari瀏覽器中，要讓文字框處於選中狀態，必須顯得讓文字框獲得焦點。而我們這裡只是在點選單元格時，插入文字框並給文字框賦值，文字框並沒有獲得焦點。解決的方法：通過jQuery的trigger方法來觸發某個事件。
Code9:
複製程式碼 程式碼如下:
inputobj.trigger("focus").trigger("select");

三、文字框按鍵事件處理
以上的這些問題解決了，那我們就再來給文字框新增一些按鍵事件。我們知道不同的瀏覽器中獲取按鍵的keyCode是不同的，但是jQuery幫我們解決了這個問題。
只需要在事件的function中加入event引數，然後在方法體中，通過event物件的which屬性就能獲得keyCode,event.which屬性同化了不同瀏覽器獲取keyCode的方法。
獲得keyCode之後，我主要做兩個按鍵事件：ESC鍵(鍵值：27)和Enter鍵(鍵值：13)。
Code10:
複製程式碼 程式碼如下:
//處理文字框上回車和esc按鍵的操作
//jQuery中某個事件方法的function可以定義一個event引數，jQuery會遮蔽瀏覽器的差異，傳遞給我們一個可用的event物件
inputobj.keyup(function(event){
//獲取當前按鍵的鍵值
//jQuery的event物件上有一個which的屬性可以獲得鍵盤按鍵的鍵值
var keycode = event.which;
//處理回車的情況
if(keycode==13){
//獲取當前文字框的內容
var inputtext = $(this).val();
//將td的內容修改成文字框中的內容
tdobj.html(inputtext);
}
//處理esc的情況
if(keycode == 27){
//將td中的內容還原成text
tdobj.html(text);
}
});

下面是完整的js程式碼：
Code11:
複製程式碼 程式碼如下:
$(document).ready(function(){
//找到學號這一列的所有單元格
//因為學號這一列的單元格在所有td中的位置是偶數（0,2,4,6），所以通過even就可以篩選到td中偶數位的單元格
var numTd = $("tbody td:even");
//單擊這些td時，建立文字框
numTd.click(function(){
//建立文字框物件
var inputobj = $("<input type='text'>");
//獲取當前點選的單元格物件
var tdobj = $(this);
//獲取單元格中的文字
var text = tdobj.html();
//如果當前單元格中有文字框，就直接跳出方法
//注意：一定要在插入文字框前進行判斷
if(tdobj.children("input").length>0){
return false;
}
//清空單元格的文字
tdobj.html("");
inputobj.css("border","0")
.css("font-size",tdobj.css("font-size"))
.css("font-family",tdobj.css("font-family"))
.css("background-color",tdobj.css("background-color"))
.css("color","#C75F3E")
.width(tdobj.width())
.val(text)
.appendTo(tdobj);
inputobj.get(0).select();
//阻止文字框的點選事件
inputobj.click(function(){
return false;
});
//處理文字框上回車和esc按鍵的操作
//jQuery中某個事件方法的function可以定義一個event引數，jQuery會遮蔽瀏覽器的差異，傳遞給我們一個可用的event物件
inputobj.keyup(function(event){
//獲取當前按鍵的鍵值
//jQuery的event物件上有一個which的屬性可以獲得鍵盤按鍵的鍵值
var keycode = event.which;
//處理回車的情況
if(keycode==13){
//獲取當前文字框的內容
var inputtext = $(this).val();
//將td的內容修改成文字框中的內容
tdobj.html(inputtext);
}
//處理esc的情況
if(keycode == 27){
//將td中的內容還原成text
tdobj.html(text);
}
});
});
});

詳細出處參考：http://www.jb51.net/article/19793.htm

相關文章