这期内容当中小编将会给大家带来有关前端代码实现单击列表修改内容功能的方法,以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
创新互联长期为上千多家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为雁塔企业提供专业的成都网站制作、成都做网站、外贸营销网站建设,雁塔网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。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) { //提交后台更改数据库 //前端操作 nowDom.innerHTML = ""+text; nowDom.setAttribute("onclick", "test(this)"); } } //文本框失焦事件 function inputOnblur(doms) { var text = doms.value; if (text != firstValue) { //提交后台更改数据库 } nowDom.innerHTML = "" + text; nowDom.setAttribute("onclick", "test(this)"); }
原理就是点击时将文本改成输入框即可!
效果演示:
点击文本后效果:
鼠标失焦或者回车保存后效果:
上述就是小编为大家分享的前端代码实现单击列表修改内容功能的方法了,如果您也有类似的疑惑,不妨参照上述方法进行尝试。如果想了解更多相关内容,请关注创新互联网站制作公司行业资讯。
网页题目:前端代码实现单击列表修改内容功能-创新互联
文章起源:https://www.cdcxhl.com/article6/ceosog.html
成都网站建设公司_创新互联,为您提供网站策划、用户体验、云服务器、微信小程序、外贸建站、网站改版
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联