JQuery實戰--可以編輯的表格

JQuery實戰--可以編輯的表格

　　今天學習到了一個執行個體，其名稱為的可以編輯的表格。其實現的效果是：點擊頁面上的單元格，單元格中的內容變成選中狀態，變成可以輸入的狀態，向單元格中輸入內容，按下斷行符號，單元格儲存其修改後的結果，按ESC，單元格的內容還原成原來的內容。其原理是：點擊單元格的時候，在單元格內添加一個文字框，其大小充滿整個單元格，其內容為單元格中的內容，修改後的內容重新賦給單元格。

　　HTML代碼：

　　

    可以編輯的表格        <script src="js/Jquery.js"></script>    <script src="js/EditTable.js"></script>    
 
        
  
 
   
 
    
  滑鼠點擊表格就可以編輯 
 
   
 
  
        
  
 
   
 
    
學號
 
    
姓名
 
   
 
   
 
    
0001
 
    
張三
 
   
 
   
 
    
0002
 
    
李四
 
   
 
   
 
    
0003
 
    
王五
 
   
 
   
 
    
0004
 
    
趙六
 
   
 
  
    
 

　　CSS代碼：

body {}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:blue;}

　　JQuery代碼：

//解決奇偶行的背景色不一樣//$(document).ready(function () {//});//簡化的ready寫法$(function () {    //找到表格的內容地區中除了第一個tr外的所有奇數行    //使用even是為了把tbody tr 返回的所有tr元素中，在數組裡面下標是偶數的元素返回，因為這些元素，實際上才是我們期望的奇數行。奇數行（odd）    $("tbody tr:even").css("background-color", "#999");    //找到所有的學號的儲存格    //$("tbody td:even").css("background-color", "red");    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寬度相同        //設定文字框的背景色        //需要將當前td中的內容放到文字框中        var inputobj = $("").css("border-width", "0").css("font-size", "16px").width(tdobj.width()).css("background-color", tdobj.css("background-color")).val(text);        //清空td中的內容        tdobj.html("");        //將文本庫插入到td中        inputobj.appendTo(tdobj);        //文字框插入後就選中        inputobj.trigger("focus").trigger("select");        inputobj.get(0).select();        inputobj.click(function () {            return false;        });        //處理文字框上的斷行符號和ESC按鍵的操作        inputobj.keyup(function (event) {            //擷取索引值            var keycode = event.which;            //處理斷行符號的情況            if (keycode == 13) {                //擷取當前文字框的內容                var inputtext = inputobj.val();                tdobj.html(inputtext);            }            if (keycode == 27) {                tdobj.html(text);            }        });    });});

　　以上就是整個執行個體的代碼了。

HTML總結：table中可以包含thead和tbody表頭的內容可以放在th中CSS總結：可以通過border-collaspse:collapse 這種方式來使表格中的單元格的邊框合并。當th上有背景色時，這個th屬於tr上定義的背景色會無效。JQuery總結：$(function(){})是$(document).ready(function(){})的簡化寫法。$("tbody tr:even")可以返回tbody中所有索引值為偶數的tr節點（：odd 是為奇數的tr節點）。function中的this代表執行這個function的對象children方法可以獲得某個節點的子節點，可以制定參數來限制子節點的內容html方法可以設定或擷取節點的HTML內容val方法可以擷取或設定節點的value值appendTo方法可以將一個節點追加到另一個節點所有子節點的後面trigger方法可以觸發某個Javascript的事件發生Jquery中某個方法的參數function上可以定義一個event的參數，Jquery會屏蔽瀏覽器的event差異，傳給我們一個可用的event對象Jquery的event對象上有一個which的屬性，可以獲得鍵盤按鍵的鍵值（13=斷行符號，27=ESC）

　　只有通過不斷地實踐，不斷的總結，編製知識網，和學過的知識聯絡起來，那麼我們的收穫才是巨大的。