JQuery實現可直接編輯的表格，jquery實現表格

JQuery實現可直接編輯的表格，jquery實現表格

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

功能：

建立一個表格，使用者單擊某個儲存格後，可以直接修改儲存格文本。
在編輯狀態下，使用者可按斷行符號鍵確認修改，按ESC鍵撤銷修改。

效果如：

思路：

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

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> 

JavaScript代碼:

$(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;   });  }); }); 

希望本文所述對大家的jQuery程式設計有所協助。