這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)前端代碼實現(xiàn)單擊列表修改內(nèi)容功能的方法,以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)長期為上千多家客戶提供的網(wǎng)站建設服務,團隊從業(yè)經(jīng)驗10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務;打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為雁塔企業(yè)提供專業(yè)的成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設,雁塔網(wǎng)站改版等技術(shù)服務。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。HTML:
test.html
<!DOCTYPE html> <html class="no-js"> <!--<![endif]--> <head> <script src="js/test.js"></script> <style> td { border:solid 1px; width:200px; height:auto; text-align:center; } </style> </head> <body> <table> <tr> <td οnclick="test(this)">test1</td> <td οnclick="test(this)">test2</td> </tr> <tr> <td οnclick="test(this)">test1</td> <td οnclick="test(this)">test2</td> </tr> </table> </body> </html>
JS:
test.js
var firstValue = ""; var nowDom = "";//當前操作的td //點擊更改事件 function test(doms) { doms.removeAttribute("onclick"); nowDom = doms; var text = doms.innerText; doms.innerHTML = '<input type="text" value="' + text + '" id="input" οnchange="chane(this)" οnblur="inputOnblur(this)"/>'; firstValue = text; document.getElementById("input").focus(); } //文本框更改事件 function chane(doms) { var text = doms.value; if (text != firstValue) { //提交后臺更改數(shù)據(jù)庫 //前端操作 nowDom.innerHTML = ""+text; nowDom.setAttribute("onclick", "test(this)"); } } //文本框失焦事件 function inputOnblur(doms) { var text = doms.value; if (text != firstValue) { //提交后臺更改數(shù)據(jù)庫 } nowDom.innerHTML = "" + text; nowDom.setAttribute("onclick", "test(this)"); }
原理就是點擊時將文本改成輸入框即可!
效果演示:
點擊文本后效果:
鼠標失焦或者回車保存后效果:
上述就是小編為大家分享的前端代碼實現(xiàn)單擊列表修改內(nèi)容功能的方法了,如果您也有類似的疑惑,不妨參照上述方法進行嘗試。如果想了解更多相關(guān)內(nèi)容,請關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊。
網(wǎng)頁題目:前端代碼實現(xiàn)單擊列表修改內(nèi)容功能-創(chuàng)新互聯(lián)
文章起源:http://bm7419.com/article6/ceosog.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站策劃、用戶體驗、云服務器、微信小程序、外貿(mào)建站、網(wǎng)站改版
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容