jQuery——可以編輯的表格

今天學習了利用jQuery實現可以編輯的表格這個例子。這個例子需求是這樣的：在前台的表格中單擊單元格便可修改其中的內容，斷行符號鍵儲存修改的內容，esc撤銷儲存的內容。原理：單擊用戶端表格單元格時，在單元格中添加一個文字框，並將單元格中原來的內容賦值給文字框，再進一步去修改文字框內容，修改後將文字框內容重新賦值給單元格。

源碼：

前台代碼：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>    jq2—可以編輯的表格        <script type="text/javascript" src="js/jquery.js"></script>    <script type="text/javascript" src="js/editTable.js"></script>    <%--<script type="text/javascript" src="js/jquery-1.9.1.js"></script>--%>    

css代碼：

body {}table {    border:1px solid #000000;    border-collapse:collapse;/*儲存格邊框合并*/    width:400px;}    table td {    border:1px solid #000000;       width:50%;}    table th {    border:1px solid #000000;       width:50%;    }tbody th {    background-color:#426fae;}

jquery代碼

$(function () {    //找到表格中除了第一個tr以外的所有偶數行    //使用even為了通過tbody tr返回所有tr元素    $("tbody tr:even").css("background-color", "#ece9d8");    //找到所有的學號儲存格    var numId = $("tbody td:even");    //給儲存格註冊滑鼠點擊事件    numId.click(function () {        //找到對應當前滑鼠點擊的td，this對應的就是響應了click的那個td        var tdObj = $(this);        //判斷td中是否有文字框        if (tdObj.children("input").length>0) {            return false;        }        //擷取表格中的內容        var text = tdObj.html();        //清空td中的內容        tdObj.html("");        //建立文字框        //去掉文字框的邊框        //設定文字框中字型與表格中的文字大小相同。        //設定文字框的背景顏色與表格的背景顏色一樣        //是文字框的寬度和td的寬度相同        //並將td中值放入文字框中        //將文字框插入到td中        var inputObj = $("").css("border-width", "0").css("font-size", tdObj.css("font-size")).css("background-color", tdObj.css("background-color")).width(tdObj.width()).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中的內容還原成原來的內容                tdObj.html(text);            }        });    });});

總結：通過這一執行個體的學習能獲得的知識點：

一、html方面

1.table中可以包含thead和tbody

2.表頭的內容中可以放th中

3.table{}這種寫法稱作標籤選取器，可以對整個table產生影響。

4.table td{}這種寫法表示table中包含的所有td。

二、jquery方面

$()的括弧中可以放4種不同的參數

1.參數直接放function,表示頁面載入完畢：例如上述例子中jquery代碼中的第1行$(function(){})

2.參數可以是css類別選取器，並被封裝成一個jquery對象。例如：上述例子中jquery代碼的第4行$(“tbody tr:even”)

3.參數如果是html文本，可以建立dom節點，並封裝成jquery對象。例如：上述例子中jquery代碼的第27行$("")

4.參數可以是一個dom對象，這個方法相當於吧dom對象裝換成jquery對象。上述例子中jquery代碼的第11行var tdObj = $(this)

本例子中的jquery對象

1.jquery對象後面加css屬性，可以設定節點的css屬性。例如上述例子中jquery代碼中的第4行$("tbody tr:even").css("background-color", "#ece9d8");

2.jquery對象內容中包含了選取器對應的dom節點，以數組儲存。

3.jquery對象後面加html方法可以設定或擷取節點的html內容。例如上述例子中jquery代碼中的第17行var text = tdObj.html()

4.jquery對象後面加val方法，可以擷取或設定節點的value值。例如上述例子中jquery代碼中第41行var inputtext = $(this).val()

5.jquery對象後面加width方法,可以設定或擷取某個節點的寬度。例如上述例子中jquery代碼中第27行tdObj.width()

6.jquery對象後面加apppendTo方法可以將一個節點追加到另一個節點所有子節點後面。例如上述例子中jquery代碼中第27行appendTo(tdObj)

7.jquery對象後面加trigger方法可以出發某個js事件發生。例如上述例子中jquery代碼中第29行inputObj.trigger("focus").trigger("select")

8.jquery對象後面加children方法可以獲得某個節點的子節點，可以制定參數來限制子節點的內容。例如上述例子中jquery代碼中第13行tdObj.children("input").length

9.如果選取器返回的jquery對象中包含多個dom節點，在這個對象上註冊類似click事件，所有dom節點都會用於此事件。例如上述例子中jquery代碼中第9行numId.click；

源碼地址：http://download.csdn.net/detail/suneqing/7396107