JQuery實(shí)現(xiàn)可直接編輯的表格

更新時(shí)間：2015年04月16日 12:43:58 作者：司青

這篇文章主要介紹了JQuery實(shí)現(xiàn)可直接編輯的表格,實(shí)例分析了jQuery動(dòng)態(tài)操作編輯表格的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

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

功能：

創(chuàng)建一個(gè)表格，用戶單擊某個(gè)單元格后，可以直接修改單元格文本。
在編輯狀態(tài)下，用戶可按回車鍵確認(rèn)修改，按ESC鍵撤銷修改。

效果如下圖：

思路：

當(dāng)用戶點(diǎn)擊某個(gè)單元格后，立即向該單元格內(nèi)插入一個(gè)文本框，將它的寬、高都設(shè)置成與單元格相的數(shù)值。用戶確認(rèn)輸入后，清空該單元格內(nèi)的所有HTML代碼，然后把內(nèi)容設(shè)置為用戶剛剛輸入的文本。

HTML代碼：

<table align="center"> 
 <tr> 
 <td>學(xué)號(hào)</td> 
 <td>姓名</td> 
 </tr> 
 <tr> 
 <td>001</td> 
 <td>dog</td> 
 </tr> 
 <tr> 
 <td>002</td> 
 <td>cat</td> 
 </tr> 
 <tr> 
 <td>003</td> 
 <td>pig</td> 
 </tr> 
</table>

JavaScript代碼:

$(function(){ 
 $("td").click(function(event){ 
  //td中已經(jīng)有了input,則不需要響應(yīng)點(diǎn)擊事件
  if($(this).children("input").length > 0) 
   return false; 
  var tdObj = $(this); 
  var preText = tdObj.html();
  //得到當(dāng)前文本內(nèi)容 
  var inputObj = $("<input type='text' />");
  //創(chuàng)建一個(gè)文本框元素 
  tdObj.html(""); //清空td中的所有元素 
  inputObj 
   .width(tdObj.width())
   //設(shè)置文本框?qū)挾扰ctd相同 
   .height(tdObj.height()) 
   .css({border:"0px",fontSize:"17px",font:"宋體"})
   .val(preText) 
   .appendTo(tdObj)
   //把創(chuàng)建的文本框插入到tdObj子節(jié)點(diǎn)的最后
   .trigger("focus")
   //用trigger方法觸發(fā)事件 
   .trigger("select"); 
  inputObj.keyup(function(event){ 
   if(13 == event.which)
   //用戶按下回車 
   { 
    var text = $(this).val(); 
    tdObj.html(text); 
   } 
   else if(27 == event.which)
   //ESC鍵 
   { 
    tdObj.html(preText); 
   } 
  }); 
  //已進(jìn)入編輯狀態(tài)后，不再處理click事件 
  inputObj.click(function(){ 
   return false; 
  }); 
 }); 
});

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: