[Web 前端] Jquery實現可直接編輯的表格

cp from : https://www.cnblogs.com/sjqq/p/6392001.html?utm_source=itdadao&utm_medium=referral

文實例講述了JQuery實現可直接編輯的表格。分享給大家供大家參考。具體分析如下：

功能：

創建一個表格，用戶單擊某個單元格后，可以直接修改單元格文本。
在編輯狀態下，用戶可按回車鍵確認修改，按ESC鍵撤銷修改。

效果如下圖：

思路：

當用戶點擊某個單元格后，立即向該單元格內插入一個文本框，將它的寬、高都設置成與單元格相的數值。用戶確認輸入后，清空該單元格內的所有HTML代碼，然后把內容設置為用戶剛剛輸入的文本。

 

<table align="center">
     <tr>
         <td>學號</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>                

$(function(){
 $("td").click(function(event){
  //td中已經有了input,則不需要響應點擊事件
  if($(this).children("input").length > 0)
   return false;
  var tdObj = $(this);
  var preText = tdObj.html();
  //得到當前文本內容
  var inputObj = $("<input type='text' />");
  //創建一個文本框元素
  tdObj.html(""); //清空td中的所有元素
  inputObj
   .width(tdObj.width())
   //設置文本框寬度與td相同
   .height(tdObj.height())
   .css({border:"0px",fontSize:"17px",font:"宋體"})
   .val(preText)
   .appendTo(tdObj)
   //把創建的文本框插入到tdObj子節點的最后
   .trigger("focus")
   //用trigger方法觸發事件
   .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);
   }
  });
  //已進入編輯狀態后，不再處理click事件
  inputObj.click(function(){
   return false;
  });
 });
});