實戰Jquery(二)--能夠編輯的表格
今天實現的是一個表格的樣例,通過獲取表格的奇數行,設置背景色屬性,使得奇偶行背景色不同.這個表格能夠在單擊時編輯,回車即更改為新輸入的內容;ESC還原最初的文本.表格的實現思路非常清晰,僅僅是在實現的過程中會出現一些小bug.通過jQuery函數就能夠一一解決.
以下看下HTML代碼:
<!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=gb2312" /> <title>JQuery實例:能夠編輯的表格</title> <link rel="stylesheet" type="text/css" href="EditTable.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="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>
在table中能夠包括thead和tbody標簽,表頭的內容放在th中.這樣寫的優點是能夠通過標簽選擇器選擇須要的內容,比方:tbody th{}
js代碼:
//須要首先通過Javascript來解決內容部分的奇偶行的背景色不同
$(function(){
//找到表格的內容區域中全部的奇數行
$("tbody tr:even").css("background-color","#ECE9D8");
//找到全部的學號單元格,保存起來
var numTd = $("tbody td:even");
numTd.click(function(){
var tdObj=$(this);
if(tdObj.children("input").length>0){
// 當前td中有input文本框，不運行click處理
return false;
}
var txt = tdObj.html();
//創建一個文本框
//去掉文本框邊框
//設置文本框中字體為16px
//使文本框的寬度和td的寬度同樣
//設置文本框背景色
//將當前td中的內容放到文本框中
var inputObj=$("<input type='text'>").css("border-width","0")
.css("font-size","16px").width(tdObj.width())
.css("background-color",tdObj.css("background-color"))
.val(tdObj.html());
//將文本框插入到td中
tdObj.html("");
inputObj.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();
tdObj.html(inputtext);
}
//esc
if(keycode==27){
tdObj.html(txt);
}
});
});
});在$ 函數中,通過$("tbody tr")能夠返回tbody中全部tr節點,另外,$("tbody tr:even")能夠返回tbody中全部索引值是偶數的tr節點.
在上面的代碼中我們能夠看到html方法,它能夠設置或獲取節點的html內容:
tdObj.html(inputtext); 為設置節點內容
var txt=tdObj.html(); 為獲取節點html內容
var inputObj=$("<input type=‘text‘>");
在這裏假設$()方法的參數是一般html文本就能夠創建一個DOM節點,並包裝成jQuery對象.而後面一連串的CSS代碼是鏈式寫法,因為jQuery大部分方法都會返回運行這種方法的jQuery對象,因此能夠採用這個寫法來編寫給予jQuery的代碼.
在處理文本框上回車和ESC按鍵操作時,響應keyup事件,在jQuery中,某個事件方法的參數function上能夠定義一個event的參數,jQuery會屏蔽瀏覽器的event差異,傳給我們一個可用的event對象,這個event對象上有一個which屬性能夠獲得鍵盤按鍵的鍵值.
CSS代碼:
table{
border:1px solid black;
/*修正單元格之間的邊框不能合並的問題*/
border-collapse:collapse;
width:400px;
}
table td{
border:1px solid black;
width:50%;
}
table th{
border:1px solid black;
width:50%;
}
tbody th{
background:#A38ae9;
}
CSS 代碼沒有什麽可說的了,這裏用的是最簡單的CSS樣式並且代碼量非常少.jQuery的強大才剛剛體會到,接下來的實戰一定會更加easy,希望能學到很多其它的知識,添加代碼量.
實戰Jquery(二)--能夠編輯的表格