editTable05.jpg

      
 
是什么原因造成上面這個(gè)bug呢？因?yàn)樵谖谋究蛑胁迦雴卧裰螅谋究蚴菍儆趩卧竦模覀凕c(diǎn)擊文本框時(shí)，同樣會(huì)觸發(fā)單元格的click事件。
我們需要阻止文本框的點(diǎn)擊行為（阻止事件冒泡）。
Code6:
復(fù)制代碼 代碼如下:
inputobj.click(function(){
return false;
});

但是點(diǎn)擊單元格的邊框時(shí)，還是會(huì)出現(xiàn)上述的bug,那我們做如下判斷：如果單元格中已經(jīng)插入了文本框，就跳出click事件。
Code7:
復(fù)制代碼 代碼如下:
$(document).ready(function(){
//找到學(xué)號(hào)這一列的所有單元格
//因?yàn)閷W(xué)號(hào)這一列的單元格在所有td中的位置是偶數(shù)（0,2,4,6），所以通過(guò)even就可以篩選到td中偶數(shù)位的單元格
var numTd = $("tbody td:even");
//單擊這些td時(shí)，創(chuàng)建文本框
numTd.click(function(){
//創(chuàng)建文本框?qū)ο?
var inputobj = $("<input type='text'>");
//獲取當(dāng)前點(diǎn)擊的單元格對(duì)象
var tdobj = $(this);
//獲取單元格中的文本
var text = tdobj.html();
//如果當(dāng)前單元格中有文本框，就直接跳出方法
//注意：一定要在插入文本框前進(jìn)行判斷
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();
//阻止文本框的點(diǎn)擊事件
inputobj.click(function(){
return false;
});
});
});

上面的bug解決了，但是我發(fā)現(xiàn)，點(diǎn)擊單元格時(shí)，雖然從表面上看文字是變了色，但沒(méi)有讓我覺(jué)得它是能被編輯的。那么我就做一點(diǎn)點(diǎn)的改動(dòng)，插入文本框的同時(shí)，選中文本框的文本。
Code 8:
復(fù)制代碼 代碼如下:
inputobj.get(0).select();

但是問(wèn)題又來(lái)了，在Safari瀏覽器中，要讓文本框處于選中狀態(tài)，必須顯得讓文本框獲得焦點(diǎn)。而我們這里只是在點(diǎn)擊單元格時(shí)，插入文本框并給文本框賦值，文本框并沒(méi)有獲得焦點(diǎn)。解決的方法：通過(guò)jQuery的trigger方法來(lái)觸發(fā)某個(gè)事件。
Code9:
復(fù)制代碼 代碼如下:
inputobj.trigger("focus").trigger("select");

三、文本框按鍵事件處理
以上的這些問(wèn)題解決了，那我們就再來(lái)給文本框添加一些按鍵事件。我們知道不同的瀏覽器中獲取按鍵的keyCode是不同的，但是jQuery幫我們解決了這個(gè)問(wèn)題。
只需要在事件的function中加入event參數(shù)，然后在方法體中，通過(guò)event對(duì)象的which屬性就能獲得keyCode,event.which屬性同化了不同瀏覽器獲取keyCode的方法。
獲得keyCode之后，我主要做兩個(gè)按鍵事件：ESC鍵(鍵值：27)和Enter鍵(鍵值：13)。
Code10:
復(fù)制代碼 代碼如下:
//處理文本框上回車(chē)和esc按鍵的操作
//jQuery中某個(gè)事件方法的function可以定義一個(gè)event參數(shù)，jQuery會(huì)屏蔽瀏覽器的差異，傳遞給我們一個(gè)可用的event對(duì)象
inputobj.keyup(function(event){
//獲取當(dāng)前按鍵的鍵值
//jQuery的event對(duì)象上有一個(gè)which的屬性可以獲得鍵盤(pán)按鍵的鍵值
var keycode = event.which;
//處理回車(chē)的情況
if(keycode==13){
//獲取當(dāng)前文本框的內(nèi)容
var inputtext = $(this).val();
//將td的內(nèi)容修改成文本框中的內(nèi)容
tdobj.html(inputtext);
}
//處理esc的情況
if(keycode == 27){
//將td中的內(nèi)容還原成text
tdobj.html(text);
}
});

下面是完整的js代碼：
Code11:
復(fù)制代碼 代碼如下:
$(document).ready(function(){
//找到學(xué)號(hào)這一列的所有單元格
//因?yàn)閷W(xué)號(hào)這一列的單元格在所有td中的位置是偶數(shù)（0,2,4,6），所以通過(guò)even就可以篩選到td中偶數(shù)位的單元格
var numTd = $("tbody td:even");
//單擊這些td時(shí)，創(chuàng)建文本框
numTd.click(function(){
//創(chuàng)建文本框?qū)ο?
var inputobj = $("<input type='text'>");
//獲取當(dāng)前點(diǎn)擊的單元格對(duì)象
var tdobj = $(this);
//獲取單元格中的文本
var text = tdobj.html();
//如果當(dāng)前單元格中有文本框，就直接跳出方法
//注意：一定要在插入文本框前進(jìn)行判斷
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();
//阻止文本框的點(diǎn)擊事件
inputobj.click(function(){
return false;
});
//處理文本框上回車(chē)和esc按鍵的操作
//jQuery中某個(gè)事件方法的function可以定義一個(gè)event參數(shù)，jQuery會(huì)屏蔽瀏覽器的差異，傳遞給我們一個(gè)可用的event對(duì)象
inputobj.keyup(function(event){
//獲取當(dāng)前按鍵的鍵值
//jQuery的event對(duì)象上有一個(gè)which的屬性可以獲得鍵盤(pán)按鍵的鍵值
var keycode = event.which;
//處理回車(chē)的情況
if(keycode==13){
//獲取當(dāng)前文本框的內(nèi)容
var inputtext = $(this).val();
//將td的內(nèi)容修改成文本框中的內(nèi)容
tdobj.html(inputtext);
}
//處理esc的情況
if(keycode == 27){
//將td中的內(nèi)容還原成text
tdobj.html(text);
}
});
});
});

相關(guān)文檔打包下載