jQuery實(shí)現(xiàn)可以編輯的表格實(shí)例詳解【附demo源碼下載】

2019-11-20 09:31:53

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了jQuery實(shí)現(xiàn)可以編輯的表格。分享給大家供大家參考，具體如下：

今天小編主要給大家講解一下，如何利用jQuery+js+css實(shí)現(xiàn)表格的編輯。接下來(lái)，小編就簡(jiǎn)單總結(jié)一下如何實(shí)現(xiàn)這個(gè)小例子。

第一步：編寫html代碼，代碼如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html>  <head>    <title>JQuery實(shí)例2：可以編輯的表格</title>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <link type="text/css" rel="stylesheet" href="css/editTable.css" />    <script type="text/javascript" src="js/jquery.js"></script>    <script type="text/javascript" src="js/editTable.js"></script>  </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>000001</td>          <td>張三</td>        </tr>        <tr>          <td>000002</td>          <td>李四</td>        </tr>        <tr>          <td>000003</td>          <td>王五</td>        </tr>        <tr>          <td>000004</td>          <td>趙六</td>        </tr>      </tbody>    </table>  </body></html>

分析一下上面的代碼，我們很容易看出來(lái)table中可以包含thead和tbody，表頭的內(nèi)容可以放到th中，我們來(lái)運(yùn)行一下，看看我們的效果：

從上面的運(yùn)行效果來(lái)看，我們很容易看出來(lái)，這個(gè)表格的基本輪廓已經(jīng)顯示出來(lái)，但是似乎少了些許味道，接著，我們來(lái)設(shè)置一下表格的樣式，我們來(lái)編寫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;}

分析一下上面的代碼，table{}這種寫法稱作為標(biāo)簽選擇器，可以對(duì)整個(gè)頁(yè)面所有的table產(chǎn)生影響；table td{}這種寫法表示的是table中包含的所有td；可以通過(guò)broder-collapse：collapse這種方式來(lái)使表格中的單元格邊框合并。接著，我們連運(yùn)行一下，看看運(yùn)行的效果：

上述的運(yùn)行效果，已經(jīng)非常接近我們需要實(shí)現(xiàn)的效果了，但是還是欠點(diǎn)火候，還是不能都編輯，接著，js里面的代碼，相應(yīng)的，在js中我們也要建立兩個(gè)文件，一個(gè)jquery一個(gè)editTable，鑒于jquery的代碼較多，所以小編已經(jīng)上傳相關(guān)資源，有需要的小伙伴可以下載文末鏈接，接著，我們來(lái)編寫ueditTable的代碼，來(lái)給整理頁(yè)面添加行為能力：

//需要首先通過(guò)Javascript來(lái)解決內(nèi)容部分奇偶行的背景色不同//$(document).ready(function(){////});//簡(jiǎn)化的ready寫法$(function(){  //找到表格的內(nèi)容區(qū)域中所有的奇數(shù)行  //使用even是為了把通過(guò)tbody tr返回的所有tr元素中，在數(shù)組里面下標(biāo)是偶數(shù)的元素返回，因?yàn)檫@些元素，實(shí)際上才是我們期望的tbody里面的奇數(shù)行  $("tbody tr:even").css("background-color","#ECE9D8");  //我們需要找到所有的學(xué)號(hào)單元格  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中input，不執(zhí)行click處理      return false;    }    var text = tdObj.html();    //清空td中的內(nèi)容    tdObj.html("");    //創(chuàng)建一個(gè)文本框    //去掉文本框的邊框    //設(shè)置文本框中的文字字體大小是16px    //使文本框的寬度和td的寬度相同    //設(shè)置文本框的背景色    //需要將當(dāng)前td中的內(nèi)容放到文本框中    //將文本框插入到td中    var inputObj = $("<input type='text'>").css("border-width","0")      .css("font-size","16px").width(tdObj.width())      .css("background-color",tdObj.css("background-color"))      .val(text).appendTo(tdObj);    //是文本框插入之后就被選中    inputObj.trigger("focus").trigger("select");    inputObj.click(function() {      return false;    });    //處理文本框上回車和esc按鍵的操作    inputObj.keyup(function(event){      //獲取當(dāng)前按下鍵盤的鍵值      var keycode = event.which;      //處理回車的情況      if (keycode == 13) {        //獲取當(dāng)當(dāng)前文本框中的內(nèi)容        var inputtext = $(this).val();        //將td的內(nèi)容修改成文本框中的內(nèi)容        tdObj.html(inputtext);      }      //處理esc的情況      if (keycode == 27) {        //將td中的內(nèi)容還原成text        tdObj.html(text);      }    });  });});

運(yùn)行效果如下：