JQuery學習日誌二(可編輯的表格)

JS代碼如下：

//需要首先通過Javascript來解決內容部分奇偶行的背景色不同 //$(document).ready(function(){ // //}); //簡化的ready寫法 $(function(){ //找到表格的內容區域中所有的奇數行 //使用even是爲了把通過tbody tr返回的所有tr元素中，在數組裏面下標是偶數的元素返回，因爲這些元素，實際上纔是我們期望的tbody裏面的奇數行 $("tbody tr:even").css("background-color","#ECE9D8"); //我們需要找到所有的學號單元格 var numTd = $("tbody td:even"); //給這些單元格註冊鼠標點擊的事件 numTd.click(function() { //找到當前鼠標點擊的td,this對應的就是響應了click的那個td var tdObj = $(this); if (tdObj.children("input").length > 0) { //當前td中input，不執行click處理 return false; } var text = tdObj.html(); //清空td中的內容 tdObj.html(""); //創建一個文本框 //去掉文本框的邊框 //設置文本框中的文字字體大小是16px //使文本框的寬度和td的寬度相同 //設置文本框的背景色 //需要將當前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(text).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(); //將td的內容修改成文本框中的內容 tdObj.html(inputtext); } //處理esc的情況 if (keycode == 27) { //將td中的內容還原成text tdObj.html(text); } }); }); });

 

 

學習總結：

1）  table中可以包含tbody和thead；

2） 表頭的內容可以放到th中；

3） CSS中定義的table{}寫法稱爲標籤選擇器，可以對整個頁面的table產生影響；

4） CSS中定義的table td{}可以對table中的td產生影響；

5） border-collapse 可以對錶格的單元格的邊框進行合併；

6） $(document).ready(function(){})的簡化寫法： $(function(){});

7） $("tbody tr") 可以返回tbody中的所有tr節點；

8） $("tbody tr:even")可以返回tbody中索引爲偶數的tr，索引值從0開始；

9） css方法可以用於設定或獲取節點的CSS屬性；

10）JQuery的對象內容包含着選擇器對應的DOM節點，以數組形式保存；

11） get方法可以獲得JQuery對象中包含的某一個DOM節點；

12） function中的this代表執行這個function的對象；

13） $()方法的參數是一個DOM對象時，這個方法相當於把DOM對象轉換成JQuery對象；

14） children方法可以獲得某個節點的子節點，可以制定參數來限制子節點的內容；

15） 如果選擇器返回的JQuery對象中包含多個DOM節點，在這個對象上註冊類似click這樣的事件時，所有DOM節點都會用於事件；

16） html方法可以設置或獲取節點的HTML內容；

17） val方法可以獲取或設置節點的value值；

18） $()方法的參數如果是一段正確的HTML文本，則可以創建一個DOM節點，幷包裝成JQuery對象；

19） JQuery大部分方法都會返回執行這個方法的JQuery對象，因此可以採用鏈式方法的寫法來編寫給予JQuery的代碼；

20） width方法可以設置或獲取某個節點的寬度；

21） appendTo方法可以將一個節點追加到另一個節點所有子節點的後面；

22） 阻止事件傳遞可以讓當前節點的事件返回false；

23） trigger方法可以觸發某個javascript的事件發生；

24） JQuery中某個事件方法的參數function上可以定義一個event的參數，JQuery會屏蔽瀏覽器的event差異，傳給我們一個可用的 event對象；

25） JQuery的event對象上有一個which的屬性可以獲得鍵盤按鍵的鍵值；

26） 13表示回車鍵，27表示ESC鍵。