jQuery--編輯表格

jQuery--編輯表格

表格操作是我們經常遇到的，還記得剛開始學習牛腩新聞發布系統時，跟著視頻進行表格的一些基本操作，而對它的原理與概念完全不懂，僅僅是跟著老師的操作而進行操作。通過這次學習，對錶格的操作有了進一步的瞭解與掌握。

首先來看一下其效果： 

 

實現過程：

HTML代碼：

 

<script type=text/javascriptsrc=js/jquery.js></script><script type=text/javascriptsrc=js/editTable.js></script>

滑鼠點擊表格即可修改
學號	姓名
1	王朋波
2	victor
3	wangpengbo
4	wang

 

 

Javascript中的代碼：

 

//需要通過js來解決內部奇偶行背景色不同 $(function(){         //找到表格內容地區中除了第一個tr以外的所有奇數行         //使用even是為了把通過tbodytr返回的所有元素中，在數組下標是偶數的元素返回         $('tbody tr:even').css('background-color','#ECE9D8');                 //需要找到所有的學號儲存格         // $('tbodytd:even').css('background-color','red');         var numTd=$('tbodytd:even');         //給這些表格註冊按一下滑鼠的事件         numTd.click(function(){                                     //找到當滑鼠點擊的td，this對應的響應了click的那個id                   vartdobj=$(this);                   if(tdobj.children('input').length>0){                            //當前td中 input，不執行click處理                            returnfalse;                   }                   vartext=tdobj.html();                   //清空td中的內容                   tdobj.html('');                   //建立一個文字框                   //去掉文字框的邊框                                 //設定文字框中文字大小為16px                   //使文字框的寬度與表格寬度相同                                 // 設定文字框背景色                               //需要將當前td中的內容放到文字框                   //將文字框插入，appendTo方法可以將一個節點追加到另一個節點所有子節點的後面                   varinputObj=$().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.get(0).select();                                     inputObj.click(function(){                            returnfalse;   //清除點擊td之後出現一個HTML代碼                   })                                     //處理文字框上斷行符號和esc按鍵動作                   inputObj.keyup(function(event){                            //擷取當前按下鍵盤的索引值                            varkeycode=event.which;                            //處理斷行符號的情況                            if(keycode==13){                                     //擷取當前文字框內容                                     varinputtext=$(this).val();                                     //將td中的內容修改成文字框中 的內容                                     tdobj.html(inputtext);                            }                            //處理esc的情況                            if(keycode==27){                                     //將td中的內容還原成text                                     tdobj.html(text);                            }                   })         })})

 

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-color :#A3BAE9; }

 

 

這裡我們需要應用一個JQuery檔案，其實最主要的痛點也在這裡。不過，目前沒有對這個進行深入的研究，我們只需要能夠從JQuery中找到我們需要的資訊，能夠使用其包含的方法實現我們的功能即可。

在本執行個體中需要注意的地方是奇偶行顏色的設定上，如果不使用JQuery，相對來說有點困難，過程也會繁瑣。但是在JQuery中已經有了封裝好的方法，even方法是擷取奇數行，而odd是擷取偶數行。

 

執行個體小結：

這次主要是對錶格table的操作，由執行個體可以看出，其實它也可以看作標籤選取器；還有就是JQuery的使用，其中的方法會給我帶來眾多的便利，熟練掌握這些方法是我們這一階段所需要做的。通過這一個小執行個體的學習，對js的學習有了進一步的認識，尤其是現在跟著做項目，用到js和JQuery的地方有很多，初次接觸的時候，感覺無從下手。不過，經過這些執行個體之後，不能說掌握，但最起碼已經找到了入手點。所以，學習的同時，一定要親自動手操作，哪怕是看似簡單的例子，也要用心。