editTable05.jpg
是什么原因造成上面這個bug呢？因為在文本框中插入單元格之后，文本框是屬于單元格的，我們點擊文本框時，同樣會觸發單元格的click事件。
我們需要阻止文本框的點擊行為（阻止事件冒泡）。
Code6: 復制代碼 代碼如下:
inputobj.click(function(){
return false;
});
但是點擊單元格的邊框時，還是會出現上述的bug,那我們做如下判斷：如果單元格中已經插入了文本框，就跳出click事件。
Code7: 復制代碼 代碼如下:
$(document).ready(function(){
//找到學號這一列的所有單元格
//因為學號這一列的單元格在所有td中的位置是偶數（0,2,4,6），所以通過even就可以篩選到td中偶數位的單元格
var numTd = $("tbody td:even");
//單擊這些td時，創建文本框
numTd.click(function(){
//創建文本框對象
var inputobj = $("<input type='text'>");
//獲取當前點擊的單元格對象
var tdobj = $(this);
//獲取單元格中的文本
var text = tdobj.html();
//如果當前單元格中有文本框，就直接跳出方法
//注意：一定要在插入文本框前進行判斷
if(tdobj.children("input").length>0){
return false;
}
//清空單元格的文本
tdobj.html("");
inputobj.css("border","0")
.css("font-size",tdobj.css("font-size"))
.css("font-family",tdobj.css("font-family"))
.css("background-color",tdobj.css("background-color"))
.css("color","#C75F3E")
.width(tdobj.width())
.val(text)
.appendTo(tdobj);
inputobj.get(0).select();
//阻止文本框的點擊事件
inputobj.click(function(){
return false;
});
});
});
上面的bug解決了，但是我發現，點擊單元格時，雖然從表面上看文字是變了色，但沒有讓我覺得它是能被編輯的。那么我就做一點點的改動，插入文本框的同時，選中文本框的文本。
Code 8: 復制代碼 代碼如下:
inputobj.get(0).select();
但是問題又來了，在Safari瀏覽器中，要讓文本框處于選中狀態，必須顯得讓文本框獲得焦點。而我們這里只是在點擊單元格時，插入文本框并給文本框賦值，文本框并沒有獲得焦點。解決的方法：通過jQuery的trigger方法來觸發某個事件。
Code9: 復制代碼 代碼如下:
inputobj.trigger("focus").trigger("select");
三、文本框按鍵事件處理
以上的這些問題解決了，那我們就再來給文本框添加一些按鍵事件。我們知道不同的瀏覽器中獲取按鍵的keyCode是不同的，但是jQuery幫我們解決了這個問題。
只需要在事件的function中加入event參數，然后在方法體中，通過event對象的which屬性就能獲得keyCode,event.which屬性同化了不同瀏覽器獲取keyCode的方法。
獲得keyCode之后，我主要做兩個按鍵事件：ESC鍵(鍵值：27)和Enter鍵(鍵值：13)。
Code10: 復制代碼 代碼如下:
//處理文本框上回車和esc按鍵的操作
//jQuery中某個事件方法的function可以定義一個event參數，jQuery會屏蔽瀏覽器的差異，傳遞給我們一個可用的event對象
inputobj.keyup(function(event){
//獲取當前按鍵的鍵值
//jQuery的event對象上有一個which的屬性可以獲得鍵盤按鍵的鍵值
var keycode = event.which;
//處理回車的情況
if(keycode==13){
//獲取當前文本框的內容
var inputtext = $(this).val();
//將td的內容修改成文本框中的內容
tdobj.html(inputtext);
}
//處理esc的情況
if(keycode == 27){
//將td中的內容還原成text
tdobj.html(text);
}
});
下面是完整的js代碼：
Code11: 復制代碼 代碼如下:
$(document).ready(function(){
//找到學號這一列的所有單元格
//因為學號這一列的單元格在所有td中的位置是偶數（0,2,4,6），所以通過even就可以篩選到td中偶數位的單元格
var numTd = $("tbody td:even");
//單擊這些td時，創建文本框
numTd.click(function(){
//創建文本框對象
var inputobj = $("<input type='text'>");
//獲取當前點擊的單元格對象
var tdobj = $(this);
//獲取單元格中的文本
var text = tdobj.html();
//如果當前單元格中有文本框，就直接跳出方法
//注意：一定要在插入文本框前進行判斷
if(tdobj.children("input").length>0){
return false;
}
//清空單元格的文本
tdobj.html("");
inputobj.css("border","0")
.css("font-size",tdobj.css("font-size"))
.css("font-family",tdobj.css("font-family"))
.css("background-color",tdobj.css("background-color"))
.css("color","#C75F3E")
.width(tdobj.width())
.val(text)
.appendTo(tdobj);
inputobj.get(0).select();
//阻止文本框的點擊事件
inputobj.click(function(){
return false;
});
//處理文本框上回車和esc按鍵的操作
//jQuery中某個事件方法的function可以定義一個event參數，jQuery會屏蔽瀏覽器的差異，傳遞給我們一個可用的event對象
inputobj.keyup(function(event){
//獲取當前按鍵的鍵值
//jQuery的event對象上有一個which的屬性可以獲得鍵盤按鍵的鍵值
var keycode = event.which;
//處理回車的情況
if(keycode==13){
//獲取當前文本框的內容
var inputtext = $(this).val();
//將td的內容修改成文本框中的內容
tdobj.html(inputtext);
}
//處理esc的情況
if(keycode == 27){
//將td中的內容還原成text
tdobj.html(text);
}
});
});
});
相關文檔打包下載
新聞熱點
疑難解答
