1. 程式人生 > >可編輯表格實現

可編輯表格實現

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