本文摘自PHP中文网,作者(*-*)浩,侵删。
前端做假修改(只更改显示数据),实际更改数据(更改数据库)后台执行。
当前代码段为前端代码展示: (推荐学习:前端视频)
HTML:
test.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html>
< html class = "no-js" >
< 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 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)");
}
|
原理就是点击时将文本改成输入框即可!
效果演示:
点击文本后效果:
鼠标失焦或者回车保存后效果:
以上就是单击列表修改其内容(前端部分)怎么做(代码)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript dom的详细介绍
如何实现炫酷的数字大屏
vue前端ui框架有哪些?
vue.js是前端还是后端
如何设计算法?常见的算法范式介绍
js常用正则表达式总汇
javascript是前端还是后端
构建工具是什么
服务器上webpack打包的过期hash文件如何进行清理
推荐一个chrome devtools实用小插件:css overview panel
更多相关阅读请进入《前端》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 单击列表修改其内容(前端部分)怎么做(代码)