溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了jQuery如何實現可編輯的表格，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
內容
顯示效果
照例，先上代碼
HTML代碼：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="script/jquery-1.8.2.js"></script> <script type="text/javascript" src="script/EditTable.js"></script> <link href="CSS/EditTable.css" rel="stylesheet" /> </head> <body> <table> <thead> <tr> <th colspan="2">鼠標點擊表格項就可以編輯</th> </tr> </thead> <tbody> <tr> <th>學號</th> <th>姓名</th> </tr> <tr> <td>0000001</td> <td>張三</td> </tr> <tr> <td>0000002</td> <td>李四</td> </tr> <tr> <td>0000003</td> <td>王五</td> </tr> <tr> <td>0000004</td> <td>趙六</td> </tr> </tbody> </table> </body> </html>
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;
}JavaScript代碼：
//需要首先通過JavaScript來解決內容部分奇偶行的背景不同
$(function () {
//找到表格的內容區域中所有的偶數行
$("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中有內容，不執行click操作
return false;
}
var text = tdObj.html();
tdObj.html("");
//創建一個文本框
//去掉文本框的邊框
//設置文本框中的文字字體大小事15px
//是文本框的寬度和td的寬度相同
//設置文本框的背景色
//需要將當前td中的內容放到文本框中
//清空td中的內容
//文本框插入到td中去
var inputObj = $("<input type='text'>").css("border-width", "0").css("font-size", "15px").css("background-color", tdObj.css("background-color")).width(tdObj.width()).val(tdObj.html()).val(text).appendTo(tdObj);
//使得文本框插入之后就被選中
inputObj.trigger("focus").trigger("select");
inputObj.click(function () {
return false;
});
//處理文本框上回車和esc按鍵的操作
inputObj.keyup(function () {
//獲取當前按下鍵盤的鍵值
var keycode = event.which;
//處理回車的情況
if (keycode == 13) {
//獲取到當前文本框中的內容
var inputtext = $(this).val();
//將td的內容修改成文本框中的內容
tdObj.html(inputtext);
}
//處理esc的情況
if (keycode == 27) {
tdObj.html(text);
}
});
});
});這次代碼稍微有點長，但是對于一目十行的大神們來說這都不算啥！
總結
HTML知識點：
table中可以包含thead和tbody
表頭的內容可以放到th中
CSS知識點：
table{}這種寫法稱作標簽選擇器，可以對整個頁面所有的table產生影響
table td{}這種寫法表示的是table中包含的所有td
可以通過border-collapse：collapse這種方式來使表格中的單元格的邊框合并
當th上有背景色，這個th屬于的tr上定義的背景色會無效
css方法可以用于設定或獲取節點的css屬性，參數名是css的屬性名
JavaScript知識點：
(function())是(function())是(document).ready(function(){})的簡化寫法
$(“tbody tr”)可以返回tbody中的所有tr節點
$(“tbody tr:even”)可以返回tbody中所有索引值是偶數的tr節點
jQuery的對象內容包含著選擇器對應的DOM節點，以數組形式保存
get方法可以獲得jQuery對象中包含的某一個DOM節點
function中的this代表執行這個function的對象
$()方法的參數是一個DOM對象時，這個方法相當于把DOM對象轉換成jQuery對象
children方法可以獲得某個節點的子節點，可以指定參數來限制子節點的內容
如果選擇器返回的jQuery對象中包含多個DOM節點，在這個對象上注冊類是click這樣的時間是，所有DOM節點都會用于事件
html方法可以設置或獲取節點的HTML內容
val方法可以獲取或設置節點的value值
$()方法的參數如果是一段正確的HTML文本，則可以創建一個DOM節點，并包裝成jQuery對象
jQuery大部分方法都會返回執行這個方法的jQuery對象，因此可以采用鏈式方法的寫法來編寫給予jQuery的代碼
width方法可以設置或獲取某個節點的寬度
appendTo方法可以將一個節點追加到另一個節點所有子節點的后面
阻止事件傳遞可以讓當前節點的事件返回false
trigger該方法可以觸發某個JavaScript的事件發生
jQuery中某個實踐方法的參數function上可以定義一個event的參數，jQuery會屏蔽瀏覽器的event差異，傳給我們一個可用的event對象
jQuery的event對象上有一個which的屬性，可以獲得鍵盤按鍵的值
13表示回車鍵，27表示ESC鍵
end
jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發網站。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“jQuery如何實現可編輯的表格”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
