jQuery 實(shí)現(xiàn)雙擊編輯表格功能
先給大家展示下效果圖:
下面用簡(jiǎn)單方法實(shí)現(xiàn)的簡(jiǎn)單表格編輯功能:
簡(jiǎn)單的HTML代碼略過(guò)了,下面是js實(shí)現(xiàn)過(guò)程
JavaScript:
<span style="font-size:18px;">$(".tables").on("dblclick","td",function(){ if($(this).children("input").length>0){ return false; } var tdDom = $(this); //保存初始值 var tdPreText = $(this).text(); //給td設(shè)置寬度和給input設(shè)置寬度并賦值 $(this).width(100).html("<input type='text'>").find("input").width(100).val(tdPreText); //失去焦點(diǎn)的時(shí)候重新賦值 var inputDom = $(this).find("input"); inputDom.blur(function(){ var newText = $(this).val(); $(this).remove(); tdDom.text(newText); });</span>
以上所述是小編給大家介紹的jQuery 實(shí)現(xiàn)雙擊編輯表格功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- jQuery實(shí)現(xiàn)可編輯表格并生成json結(jié)果(實(shí)例代碼)
- jQuery實(shí)現(xiàn)的可編輯表格完整實(shí)例
- 基于Bootstrap使用jQuery實(shí)現(xiàn)簡(jiǎn)單可編輯表格
- BootStrap和jQuery相結(jié)合實(shí)現(xiàn)可編輯表格
- jQuery+PHP實(shí)現(xiàn)可編輯表格字段內(nèi)容并實(shí)時(shí)保存
- jQuery(非HTML5)可編輯表格實(shí)現(xiàn)代碼
- 用Jquery實(shí)現(xiàn)可編輯表格并用AJAX提交到服務(wù)器修改數(shù)據(jù)
- jQuery一步一步實(shí)現(xiàn)跨瀏覽器的可編輯表格,支持IE、Firefox、Safari、Chrome、Opera
- 基于jQuery實(shí)現(xiàn)可編輯的表格
相關(guān)文章
jQuery3.0中的buildFragment私有函數(shù)詳解
在 jQuery3.0中,buildFragment 是一個(gè)私有函數(shù),用來(lái)構(gòu)建一個(gè)包含子節(jié)點(diǎn) fragment 對(duì)象。下文給大家介紹jQuery3.0中的buildFragment私有函數(shù)詳解,對(duì)jquery3.0 buildfragment相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-08-08jQuery實(shí)現(xiàn)防止提交按鈕被雙擊的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)防止提交按鈕被雙擊的方法,涉及jQuery針對(duì)鼠標(biāo)按鍵的操作技巧以及preventDefault方法對(duì)元素默認(rèn)行為的修改技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03asp.net中oracle 存儲(chǔ)過(guò)程(圖文)
存儲(chǔ)過(guò)程是在大型數(shù)據(jù)庫(kù)系統(tǒng)中,一組為了完成特定功能的sql語(yǔ)句集,經(jīng)過(guò)編譯存儲(chǔ)在數(shù)據(jù)庫(kù)中,用戶通過(guò)指定存儲(chǔ)過(guò)程的名字并給出參數(shù)(如果該存儲(chǔ)過(guò)程帶有參數(shù))來(lái)執(zhí)行它,下面小編給大家介紹asp.net中oracle存儲(chǔ)過(guò)程,需要的朋友可以參考下2015-08-08Jquery公告滾動(dòng)+AJAX后臺(tái)得到數(shù)據(jù)
ajax得到值,用JQUERY綁定給對(duì)應(yīng)的UL.利用JQUERY的動(dòng)畫(huà)來(lái)實(shí)現(xiàn)他們的滾動(dòng)公告。2011-04-04分享33個(gè)jQuery與CSS3實(shí)現(xiàn)的絢麗鼠標(biāo)懸停效果
今天整理了33個(gè)使用jQuery與CSS3實(shí)現(xiàn)絢麗的鼠標(biāo)懸停效果,有些是純CSS3的,這些效果你完全可以用在你的網(wǎng)頁(yè)上,讓網(wǎng)站獲得更好的體驗(yàn)2014-12-12jquery animate 動(dòng)畫(huà)效果使用說(shuō)明
jquery animate 動(dòng)畫(huà)效果使用說(shuō)明,需要的朋友可以參考下。2009-11-11用jQuery實(shí)現(xiàn)一些導(dǎo)航條切換,顯示隱藏的實(shí)例代碼
用jQuery實(shí)現(xiàn)一些導(dǎo)航條切換,顯示隱藏的實(shí)例代碼,需要的朋友可以參考一下2013-06-06