可編輯表格實現
阿新 • • 發佈:2019-01-04
$("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; }); }); });