单击列表修改其内容(前端部分)怎么做(代码)
前端  /  管理员 发布于 6年前   364
前端做假修改(只更改显示数据),实际更改数据(更改数据库)后台执行。
当前代码段为前端代码展示: (推荐学习:前端视频)
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)");}
原理就是点击时将文本改成输入框即可!
效果演示:
点击文本后效果:
鼠标失焦或者回车保存后效果:
以上就是单击列表修改其内容(前端部分)怎么做(代码)的详细内容,更多请关注其它相关文章!
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号