jQuery實現(xiàn)可編輯的表格

更新時間：2019年12月11日 10:06:03 作者：羅俊-Everns

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)可編輯的表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言

上一篇博客更新了在頁面中如何判斷用戶名是否已經(jīng)被輸入，這篇博客介紹一下頁面中的表格內(nèi)容如何像Excle表格一樣修改。

內(nèi)容

顯示效果

照例，先上代碼

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>學(xué)號</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");
 //給這些單元格注冊鼠標點擊的事件
 numTd.click(function () {
 //找到當(dāng)前鼠標點擊的td，this對應(yīng)的就是響應(yīng)了click的那個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)建一個文本框
 //去掉文本框的邊框
 //設(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);
  }
 });
 });
});

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

總結(jié)

HTML知識點：

table中可以包含thead和tbody
表頭的內(nèi)容可以放到th中

CSS知識點：

table{}這種寫法稱作標簽選擇器，可以對整個頁面所有的table產(chǎn)生影響
table td{}這種寫法表示的是table中包含的所有td
可以通過border-collapse：collapse這種方式來使表格中的單元格的邊框合并
當(dāng)th上有背景色，這個th屬于的tr上定義的背景色會無效
css方法可以用于設(shè)定或獲取節(jié)點的css屬性，參數(shù)名是css的屬性名

JavaScript知識點：

(function())是(function())是(document).ready(function(){})的簡化寫法
$(“tbody tr”)可以返回tbody中的所有tr節(jié)點
$(“tbody tr:even”)可以返回tbody中所有索引值是偶數(shù)的tr節(jié)點
jQuery的對象內(nèi)容包含著選擇器對應(yīng)的DOM節(jié)點，以數(shù)組形式保存
get方法可以獲得jQuery對象中包含的某一個DOM節(jié)點
function中的this代表執(zhí)行這個function的對象
$()方法的參數(shù)是一個DOM對象時，這個方法相當(dāng)于把DOM對象轉(zhuǎn)換成jQuery對象
children方法可以獲得某個節(jié)點的子節(jié)點，可以指定參數(shù)來限制子節(jié)點的內(nèi)容
如果選擇器返回的jQuery對象中包含多個DOM節(jié)點，在這個對象上注冊類是click這樣的時間是，所有DOM節(jié)點都會用于事件
html方法可以設(shè)置或獲取節(jié)點的HTML內(nèi)容
val方法可以獲取或設(shè)置節(jié)點的value值
$()方法的參數(shù)如果是一段正確的HTML文本，則可以創(chuàng)建一個DOM節(jié)點，并包裝成jQuery對象
jQuery大部分方法都會返回執(zhí)行這個方法的jQuery對象，因此可以采用鏈式方法的寫法來編寫給予jQuery的代碼
width方法可以設(shè)置或獲取某個節(jié)點的寬度
appendTo方法可以將一個節(jié)點追加到另一個節(jié)點所有子節(jié)點的后面
阻止事件傳遞可以讓當(dāng)前節(jié)點的事件返回false
trigger該方法可以觸發(fā)某個JavaScript的事件發(fā)生
jQuery中某個實踐方法的參數(shù)function上可以定義一個event的參數(shù)，jQuery會屏蔽瀏覽器的event差異，傳給我們一個可用的event對象
jQuery的event對象上有一個which的屬性，可以獲得鍵盤按鍵的值
13表示回車鍵，27表示ESC鍵