网页编程网
www.youkud.com
掌握计算机、网络技术，让生活更美好！
主页
网页制作
html5
JavaScript
DIV+CSS
前端美工
网络编程
Java与JSP
PHP
Python 3
Golang
数据库
Mysql
Oracle
NoSQL
SQLite
运维
Linux
正则表达式
架构
网页特效
移动开发
网络
SDN
QUIC
网络原理
人工智能
强化学习
机器学习
区块链
区块链1
区块2
dapp
理论
dapp案例
数据采集
爬虫技术
爬虫案例
当前位置：
主页
>>
JavaScript
>> 正文
js双击编辑内容，并用ajax传数据库
阅读：3085 输入：2022-03-01 14:27:38
<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>
上一篇：
linux查看用户登录，操作历史等，详细显示命令运行信息
下一篇：
php中$O00OO0=urldecode解密，php解密方法
相关阅读
js实现批量生成18位身份证号码
js实现table表格搜索筛选功能，按值过滤某行显示
单网页实现加密码才能访问总结
下载专区
软件下载（提取码：mtag）
Tag
网站Tag
标签云
HTML工具
进制间转换
进制转换（带小数）
html代码运行
HTML工具
字母翻转
硬盘整数分区
html颜色代码
HTML工具
除空格回车
万年历
fojiao
HTML工具
小游戏
在线绘画
更多
手机版
联系微信:jingqishens