標籤：lap == focus pen div 不同 width 部分 處理
今天實現的是一個表格的範例,通過擷取表格的奇數行,設定背景色屬性,使得奇偶行背景色不同.這個表格能夠在單擊時編輯,斷行符號即更改為新輸入的內容;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);}//escif(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(二)--能夠編輯的表格
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
