主页
M
html5
JavaScript
DIV+CSS
前端美工
--网页制作--
Java与JSP
PHP
Python 3
Golang
--网络编程--
Mysql
Oracle
NoSQL
SQLite
--数据库--
Linux
正则表达式
架构
--运维--
--网页特效--
--移动开发--
SDN
QUIC
网络原理
--网络--
强化学习
机器学习
--人工智能--
区块链1
区块2
--区块链--
爬虫技术
爬虫案例
--数据采集--
理论
dapp案例
--dapp--
js双击编辑内容，并用ajax传数据库
2022-03-01
网页编程网
网页编程网
<html> <head> <title>(单击)双击直接修改内容的代码</title> <script> function edit(element){ var oldhtml = element.innerHTML//获得元素之前的内容 var newobj = document.createElement('input')//创建一个input元素 newobj.type = 'text'//为newobj元素添加类型 newobj.value=oldhtml element.innerHTML = ''//设置元素内容为空 element.appendChild(newobj)//添加子元素 newobj.focus()//获得焦点 //设置newobj失去焦点的事件 newobj.onblur = function(){ //下面应该判断是否做了修改并使用ajax代码请求服务端将id与修改后的数据提交 //当触发时判断newobj的值是否为空，为空则不修改，并返回oldhtml element.innerHTML = this.value ? this.value : oldhtml if(this.value != oldhtml){ alert('id号：'+element.id+'，内容变化为：'+element.innerHTML); } }//onblur }//edit </script> </head> <body> <h3>双击修改</h3> 姓名:<span id="1" ondblclick="edit(this)">张三</span><br/> 家庭住址:<span id="2" ondblclick="edit(this)">张三</span> </body> </html>
阅读原文
阅读
3087
123
显示电脑版