AJAX學(xué)習(xí)筆記05

AJAX學(xué)習(xí)筆記05

學(xué)習(xí)課程：

學(xué)習(xí)內(nèi)容

相關(guān)文件

實(shí)現(xiàn)可編輯的表格

jquery-editTable.jsp

jquery.js

jquery-editTable.js

jquery-editTable.css

實(shí)現(xiàn)效果：

點(diǎn)擊單元格，單元格會(huì)變成一個(gè)文本輸入框，文本框中初始的內(nèi)容為單元格中的內(nèi)容，并且這些內(nèi)容處于被選擇狀態(tài)下

可以在單元格中輸入文本內(nèi)容，

單擊回車，文本中的內(nèi)容會(huì)轉(zhuǎn)換到單元格中的內(nèi)容

想要修改成原來的內(nèi)容可以按下ESC鍵

三個(gè)文件的代碼：

Jquery-editTable.jsp

jquery-editTable.css

@CHARSET?"UTF-8";?table?,?td{??/*為表格加入邊框，讓相鄰邊框合并*/border-collapse:?collapse;border:?1px?solid?black;??/*abcdef?abcd0b?abcd0a*/color:?ab0d0a;}

jquery-editTable.js

//在頁面加載時(shí)，讓所有的td都擁有一個(gè)點(diǎn)擊事件 $(document).ready(?function(){//找到所有的td標(biāo)簽 var?tds?=?$("td");?//為td標(biāo)簽添加單擊事件 tds.click(?tdClick?);}?);function?tdClick(){//0.保存當(dāng)前的td節(jié)點(diǎn) var?td?=?$(?this?);//1.取出當(dāng)前td中的內(nèi)容文本保存起來 var?text?=?td.text();//2.清空td里面的內(nèi)容 td.empty();//3.建立一個(gè)文本框，即一個(gè)input的元素節(jié)點(diǎn) //為什么創(chuàng)建標(biāo)簽就創(chuàng)建出文本框， //經(jīng)過測(cè)試，input的type屬性默認(rèn)類型為text? var?input?=?$("");//4.設(shè)置文本框的值是保存起來的文本內(nèi)容 //input.attr(?"type"?,?"button"); input.attr(?"value"?,?text?);//4.5讓文本框響應(yīng)鍵盤事件 input.keyup(?function(?event?){//0.獲取用戶按下的鍵值 var?keyEvent?=?event?||?window.event;var?keyCode?=?keyEvent.keyCode;//1.判斷是否按下回車 if?(?keyCode?==?13?){//2.獲取當(dāng)前文本框的內(nèi)容 var?inputNode?=?$(?this?);//3.清空td里面的內(nèi)容 td.empty();//4.將保存的文本框中的內(nèi)容填充到td中 td.html(?inputNode.val()?);?//5.讓td重新?lián)碛悬c(diǎn)擊事件 td.click(?tdClick?);}//擴(kuò)展作業(yè)：按下ESC可以恢復(fù)操作 //ESC鍵的keyCode為27 if?(?keyCode?==?27?){var?inputNode?=?$(?this?);input.val(?text?);}});//5.將文本框中的內(nèi)容加入到td中 td.append(?input?);?//input.appendTo(?td?); //當(dāng)td中的內(nèi)容變成一個(gè)input的元素節(jié)點(diǎn)以后，不再響應(yīng)onclick事件 //當(dāng)td中的內(nèi)容從input的元素節(jié)點(diǎn)變成文字信息時(shí)，再將onclick事件注冊(cè)上去 //5.5將文本框中的文字被選中 //將JQuery對(duì)象轉(zhuǎn)換為普通的DOM對(duì)象，才能調(diào)用select()方法 var?inputDom?=?input.get(?0?);inputDom.select();//6.取消td上的點(diǎn)擊事件?API，事件——unbind(); td.unbind();}

Ajax

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。