基于jquery的高性能td和input切換并可修改內(nèi)容實(shí)現(xiàn)代碼
在之前的基礎(chǔ)上，添加方向鍵左右支持。
在實(shí)際工作中，我們會(huì)碰到這樣一個(gè)情況。在頁(yè)面中顯示著100個(gè)數(shù)據(jù)，同時(shí)用戶還希望他可以更改其中的數(shù)據(jù)，普通的方式可能如下，
這種方式會(huì)出現(xiàn)一個(gè)問(wèn)題，就是頁(yè)面顯示的時(shí)候有點(diǎn)慢，同時(shí)如果有滾動(dòng)條的話，會(huì)有些卡。下面給出我的一個(gè)解決方法，顯示的時(shí)候全是td的，沒(méi)有input標(biāo)簽，如下
當(dāng)你點(diǎn)擊其中一個(gè)td時(shí)，就會(huì)出現(xiàn)下面這樣
當(dāng)你點(diǎn)擊td的時(shí)候，會(huì)在td動(dòng)態(tài)加入一個(gè)input同時(shí)把td的值賦給input，當(dāng)你鼠標(biāo)離開(kāi)input時(shí)，會(huì)把input的值賦給td。同時(shí)支持回車(chē)，上下方向鍵，進(jìn)行向右，上下移動(dòng)。
可以對(duì)這個(gè)做一些擴(kuò)展，做出一些很實(shí)際的功能，（對(duì)大批量數(shù)據(jù)編輯等等）。不多說(shuō)了，附上源碼，僅供參考。
在線演示地址http://demo.jb51.net/js/td_input_edit/index.htm
打包下載地址http://xiazai.jb51.net/201101/yuanma/td_input_edit.rar
相關(guān)文章
js判斷背景圖片是否加載成功使用img的width實(shí)現(xiàn)
判斷背景圖片是否加載成功想必大家對(duì)此很陌生吧，會(huì)了之后就可以判斷css背景圖片了，具體判斷代碼如下，感興趣的朋友可以參考下哈2013-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript中參數(shù)傳遞三種方式：按值傳遞、引用傳遞和共享傳遞,文中的示例代碼講解詳細(xì),感興趣的可以了解下2023-09-09
jacascript DOM節(jié)點(diǎn)——元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)、文本節(jié)點(diǎn)
這篇文章主要介紹了jacascript DOM節(jié)點(diǎn)——元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)、文本節(jié)點(diǎn),需要的朋友可以參考下2017-04-04
這篇文章主要介紹了Javascript URI 解析介紹,本文直接給出代碼示例,需要的朋友可以參考下2015-03-03
高性能web開(kāi)發(fā) 如何加載JS，JS應(yīng)該放在什么位置？
所有瀏覽器在下載JS的時(shí)候，會(huì)阻止一切其他活動(dòng)，比如其他資源的下載，內(nèi)容的呈現(xiàn)等等。至到JS下載、解析、執(zhí)行完畢后才開(kāi)始繼續(xù)并行下載其他資源并呈現(xiàn)內(nèi)容。2010-05-05
JavaScript實(shí)現(xiàn)兼容IE6的收起折疊與展開(kāi)效果實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)兼容IE6的收起折疊與展開(kāi)效果,結(jié)合具體實(shí)例形式分析了javascript事件響應(yīng)及針對(duì)頁(yè)面元素屬性的動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-09-09
這篇文章主要介為大家詳細(xì)紹了Bootstrap CSS布局之按鈕的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Fetch API是一種用于進(jìn)行網(wǎng)絡(luò)請(qǐng)求的現(xiàn)代JavaScript API，提供了更簡(jiǎn)潔、強(qiáng)大和靈活的方式來(lái)處理異步數(shù)據(jù)交互，本文主要為大家介紹了js中js中基本用法，感興趣的同學(xué)可以參考下2023-07-07
這篇文章主要介紹了淺談document.write()輸出樣式，十分的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2015-05-05
javascript在IE下trim函數(shù)無(wú)法使用的解決方法
這篇文章主要介紹了javascript在IE下trim函數(shù)無(wú)法使用的解決方法,分別敘述了javascript以及jQuery下的解決方案,對(duì)于WEB前端javascript設(shè)計(jì)人員進(jìn)行瀏覽器兼容性調(diào)試有不錯(cuò)的借鑒價(jià)值,需要的朋友可以參考下2014-09-09