溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jQuery如何實(shí)現(xiàn)可編輯的表格

發(fā)布時(shí)間：2021-05-24 14:21:58 來源：億速云 閱讀：289 作者：小新 欄目：web開發(fā)

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

內(nèi)容

顯示效果

jQuery如何實(shí)現(xiàn)可編輯的表格

照例，先上代碼

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">鼠標(biāo)點(diǎn)擊表格項(xiàng)就可以編輯</th>
  </tr>
 </thead>
 <tbody>
  <tr>
  <th>學(xué)號(hào)</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來解決內(nèi)容部分奇偶行的背景不同
$(function () {
 //找到表格的內(nèi)容區(qū)域中所有的偶數(shù)行
 $("tbody tr:even").css("background-color", "#ECE9D8");
 //找到所有可以編輯的單元格
 var numTd = $("tbody td:even");
 //給這些單元格注冊(cè)鼠標(biāo)點(diǎn)擊的事件
 numTd.click(function () {
 //找到當(dāng)前鼠標(biāo)點(diǎn)擊的td，this對(duì)應(yīng)的就是響應(yīng)了click的那個(gè)td
 var tdObj = $(this);
 if (tdObj.children("input").length>0) {
  //當(dāng)前td中有內(nèi)容，不執(zhí)行click操作
  return false;
 }
 var text = tdObj.html();
 tdObj.html("");
 //創(chuàng)建一個(gè)文本框
 //去掉文本框的邊框
 //設(shè)置文本框中的文字字體大小事15px
 //是文本框的寬度和td的寬度相同
 //設(shè)置文本框的背景色
 //需要將當(dāng)前td中的內(nèi)容放到文本框中
 //清空td中的內(nèi)容
 //文本框插入到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 () {
  //獲取當(dāng)前按下鍵盤的鍵值
  var keycode = event.which;
  //處理回車的情況
  if (keycode == 13) {
  //獲取到當(dāng)前文本框中的內(nèi)容
  var inputtext = $(this).val();
  //將td的內(nèi)容修改成文本框中的內(nèi)容
  tdObj.html(inputtext);
  }
  //處理esc的情況
  if (keycode == 27) {
  tdObj.html(text);
  }
 });
 });
});

這次代碼稍微有點(diǎn)長，但是對(duì)于一目十行的大神們來說這都不算啥！

總結(jié)

HTML知識(shí)點(diǎn)：

  1. table中可以包含thead和tbody

  2. 表頭的內(nèi)容可以放到th中

CSS知識(shí)點(diǎn)：

  1. table{}這種寫法稱作標(biāo)簽選擇器，可以對(duì)整個(gè)頁面所有的table產(chǎn)生影響

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

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

  4. 當(dāng)th上有背景色，這個(gè)th屬于的tr上定義的背景色會(huì)無效

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

JavaScript知識(shí)點(diǎn)：

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

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

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

  4. jQuery的對(duì)象內(nèi)容包含著選擇器對(duì)應(yīng)的DOM節(jié)點(diǎn)，以數(shù)組形式保存

  5. get方法可以獲得jQuery對(duì)象中包含的某一個(gè)DOM節(jié)點(diǎn)

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

  7. $()方法的參數(shù)是一個(gè)DOM對(duì)象時(shí)，這個(gè)方法相當(dāng)于把DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象

  8. children方法可以獲得某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)，可以指定參數(shù)來限制子節(jié)點(diǎn)的內(nèi)容

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

  10. html方法可以設(shè)置或獲取節(jié)點(diǎn)的HTML內(nèi)容

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

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

  13. jQuery大部分方法都會(huì)返回執(zhí)行這個(gè)方法的jQuery對(duì)象，因此可以采用鏈?zhǔn)椒椒ǖ膶懛▉砭帉懡o予jQuery的代碼

  14. width方法可以設(shè)置或獲取某個(gè)節(jié)點(diǎn)的寬度

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

  16. 阻止事件傳遞可以讓當(dāng)前節(jié)點(diǎn)的事件返回false

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

  18. jQuery中某個(gè)實(shí)踐方法的參數(shù)function上可以定義一個(gè)event的參數(shù)，jQuery會(huì)屏蔽瀏覽器的event差異，傳給我們一個(gè)可用的event對(duì)象

  19. jQuery的event對(duì)象上有一個(gè)which的屬性，可以獲得鍵盤按鍵的值

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

end

jquery是什么

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“jQuery如何實(shí)現(xiàn)可編輯的表格”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手