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

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

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

內(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 () {
 //找到當前鼠標點擊的td，this對應(yīng)的就是響應(yīng)了click的那個td
 var tdObj = $(this);
 if (tdObj.children("input").length>0) {
  //當前td中有內(nèi)容，不執(zhí)行click操作
  return false;
 }
 var text = tdObj.html();
 tdObj.html("");
 //創(chuàng)建一個文本框
 //去掉文本框的邊框
 //設(shè)置文本框中的文字字體大小事15px
 //是文本框的寬度和td的寬度相同
 //設(shè)置文本框的背景色
 //需要將當前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 () {
  //獲取當前按下鍵盤的鍵值
  var keycode = event.which;
  //處理回車的情況
  if (keycode == 13) {
  //獲取到當前文本框中的內(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這種方式來使表格中的單元格的邊框合并
當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對象時，這個方法相當于把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é)點的后面
阻止事件傳遞可以讓當前節(jié)點的事件返回false
trigger該方法可以觸發(fā)某個JavaScript的事件發(fā)生
jQuery中某個實踐方法的參數(shù)function上可以定義一個event的參數(shù)，jQuery會屏蔽瀏覽器的event差異，傳給我們一個可用的event對象
jQuery的event對象上有一個which的屬性，可以獲得鍵盤按鍵的值
13表示回車鍵，27表示ESC鍵

end

jquery是什么

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

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

分享題目：jQuery如何實現(xiàn)可編輯的表格
網(wǎng)站鏈接：http://chinadenli.net/article36/gohppg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、微信公眾號、網(wǎng)站內(nèi)鏈、靜態(tài)網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站維護

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

jquery是什么