這篇文章主要介紹了jQuery如何實現可編輯的表格，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

網站建設、成都網站建設的關注點不是能為您做些什么網站，而是怎么做網站，有沒有做好網站，給創(chuàng)新互聯建站一個展示的機會來證明自己，這并不會花費您太多時間，或許會給您帶來新的靈感和驚喜。面向用戶友好，注重用戶體驗，一切以用戶為中心。

內容

顯示效果

照例，先上代碼

HTML代碼：

 
 
 
 
 


 
 
  
  鼠標點擊表格項就可以編輯
  
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
 
學號
姓名
0000001
張三
0000002
李四
0000003
王五
0000004
趙六

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 () {
 //找到表格的內容區(qū)域中所有的偶數行
 $("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中有內容，不執(zhí)行click操作
  return false;
 }
 var text = tdObj.html();
 tdObj.html("");
 //創(chuàng)建一個文本框
 //去掉文本框的邊框
 //設置文本框中的文字字體大小事15px
 //是文本框的寬度和td的寬度相同
 //設置文本框的背景色
 //需要將當前td中的內容放到文本框中
 //清空td中的內容
 //文本框插入到td中去
 var inputObj = $("").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知識點：

1. table中可以包含thead和tbody

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

CSS知識點：

1. table{}這種寫法稱作標簽選擇器，可以對整個頁面所有的table產生影響

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

3. 可以通過border-collapse：collapse這種方式來使表格中的單元格的邊框合并

4. 當th上有背景色，這個th屬于的tr上定義的背景色會無效

5. css方法可以用于設定或獲取節(jié)點的css屬性，參數名是css的屬性名

JavaScript知識點：

1. (function())是(function())是(document).ready(function(){})的簡化寫法

2. $(“tbody tr”)可以返回tbody中的所有tr節(jié)點

3. $(“tbody tr:even”)可以返回tbody中所有索引值是偶數的tr節(jié)點

4. jQuery的對象內容包含著選擇器對應的DOM節(jié)點，以數組形式保存

5. get方法可以獲得jQuery對象中包含的某一個DOM節(jié)點

6. function中的this代表執(zhí)行這個function的對象

7. $()方法的參數是一個DOM對象時，這個方法相當于把DOM對象轉換成jQuery對象

8. children方法可以獲得某個節(jié)點的子節(jié)點，可以指定參數來限制子節(jié)點的內容

9. 如果選擇器返回的jQuery對象中包含多個DOM節(jié)點，在這個對象上注冊類是click這樣的時間是，所有DOM節(jié)點都會用于事件

10. html方法可以設置或獲取節(jié)點的HTML內容

11. val方法可以獲取或設置節(jié)點的value值

12. $()方法的參數如果是一段正確的HTML文本，則可以創(chuàng)建一個DOM節(jié)點，并包裝成jQuery對象

13. jQuery大部分方法都會返回執(zhí)行這個方法的jQuery對象，因此可以采用鏈式方法的寫法來編寫給予jQuery的代碼

14. width方法可以設置或獲取某個節(jié)點的寬度

15. appendTo方法可以將一個節(jié)點追加到另一個節(jié)點所有子節(jié)點的后面

16. 阻止事件傳遞可以讓當前節(jié)點的事件返回false

17. trigger該方法可以觸發(fā)某個JavaScript的事件發(fā)生

18. jQuery中某個實踐方法的參數function上可以定義一個event的參數，jQuery會屏蔽瀏覽器的event差異，傳給我們一個可用的event對象

19. jQuery的event對象上有一個which的屬性，可以獲得鍵盤按鍵的值

20. 13表示回車鍵，27表示ESC鍵

end

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發(fā)網站。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“jQuery如何實現可編輯的表格”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯，關注創(chuàng)新互聯行業(yè)資訊頻道，更多相關知識等著你來學習!