基于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)離開input時(shí)，會(huì)把input的值賦給td。同時(shí)支持回車，上下方向鍵，進(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+CSS實(shí)現(xiàn)下拉刷新/上拉加載插件
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)下拉刷新/上拉加載插件,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
event.srcElement 可以捕獲當(dāng)前事件作用的對(duì)象，如event.srcElement.tagName可以捕獲活動(dòng)標(biāo)記名稱。2009-12-12
基于JQuery模仿蘋果桌面的Dock效果(初級(jí)版)
新的一天新的開始，今天要分享的是用JQuery模仿蘋果操作系統(tǒng)桌面的Dock效果，之所以稱之為初級(jí)版，是因?yàn)槠渲羞€有一些bug，顯示效果并不穩(wěn)定2012-10-10
本文主要介紹了JavaScript制作游戲搖桿方向盤,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2014-04-04
JS實(shí)現(xiàn)簡(jiǎn)易的圖片拖拽排序?qū)嵗a
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)易的圖片拖拽排序?qū)嵗a，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)藍(lán)牙打印，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
本文主要介紹了如何獲取地址欄中的參數(shù)的兩種方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
這篇文章主要介紹了Openlayers學(xué)習(xí)之加載鷹眼控件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
相信好多小伙伴在使用getUserInfo獲取小程序用戶昵稱和頭像時(shí)卻獲取不到,下面這篇文章主要給大家介紹了關(guān)于微信小程序登錄獲取不到頭像和昵稱的詳細(xì)解決辦法,需要的朋友可以參考下2022-12-12
xss文件頁(yè)面內(nèi)容讀取(解決),需要的朋友可以參考下。2010-11-11