JQuery實戰--能夠編輯的表格

最後更新：2017-07-15 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：寫法 cli set 效果 get 響應 ttext 大小 return

　　今天學習到了一個執行個體，其名稱為的能夠編輯的表格。

事實上現的效果是：點擊頁面上的單元格，單元格中的內容變成選中狀態，變成能夠輸入的狀態。向單元格中輸入內容，按下斷行符號。單元格儲存其改動後的結果，按ESC，單元格的內容還原成原來的內容。

其原理是：點擊單元格的時候。在單元格內加入一個文字框，其大小充滿整個單元格，其內容為單元格中的內容，改動後的內容又一次賦給單元格。

　　HTML代碼：

<span style="font-size:18px;"><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>能夠編輯的表格</title>    <link href="css/EditTable.css" rel="stylesheet" />    <script src="js/Jquery.js"></script>    <script src="js/EditTable.js"></script></head><body>    <table  >        <thead >            <tr>                <th colspan="2">    <!--合并兩列-->                   滑鼠點擊表格就能夠編輯                </th>            </tr>        </thead>        <tbody >            <tr>                <th>學號</th>                <th>姓名</th>            </tr>            <tr>                <td>0001</td>                <td>張三</td>            </tr>            <tr>                <td>0002</td>                <td>李四</td>            </tr>            <tr>                <td>0003</td>                <td>王五</td>            </tr>            <tr>                <td>0004</td>                <td>趙六</td>            </tr>        </tbody>    </table></body></html></span>

　　CSS代碼：

<span style="font-size:18px;">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;}</span>

　　JQuery代碼：

<span style="font-size:18px;">//解決奇偶行的背景色不一樣//$(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 = $("<input type='text'>").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);            }        });    });});</span>

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

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

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

JQuery實戰--能夠編輯的表格

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More