(单击)双击直接修改内容的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>(单击)双击直接修改内容的代码</title><script type="text/javascript">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与修改后的数据提交//alert(element.id);//当触发时判断newobj的值是否为空，为空则不修改，并返回oldhtml
      element.innerHTML = this.value ? this.value : oldhtml;}
}
</script></head>
<body>姓名:<span id="1" ondblclick="edit(this)">张三</span><br/>家庭住址:<span id="2" ondblclick="edit(this)">张三</span><br/></body></html>

转载于:https://www.cnblogs.com/oogps/p/8952383.html

(单击)双击直接修改内容的代码相关推荐

python修改html内容_详解Python利用Beautiful Soup模块修改内容示例代码
Beautiful Soup是一个可以从HTML或XML文件中提取数据的Python 库.它能够通过你喜欢的转换器实现惯用的文档导航.查找.修改文档的方式.他还能够修改HTML/XML文档的内容.这篇 ...
php修改为ajax,php通过ajax实现双击table修改内容
复制代码代码如下: $(function() { $("td").dblclick(function() { //获取标签 var td = $(this); var itemi ...
html+input+js双击,JS双击变input框批量修改内容
双击空白或者文字变成input框修改内容: js代码修改 function ShowElement(element,abc){ // console.log(abc); var list = abc ...
Bootstrap Table 双击、单击行获取该行内容及获取全表的内容
Bootstrap Table 获取单击或双击的行内容看到这个应该就知道了bootstrap table的用法及如何使用了,所以下面的名称就不介绍了 test_id为表的id $("#te ...
STM32独立按键实现单击双击长按功能
目录前言一.按键功能定义二.使用步骤 1.按键初始化 2.按键扫描函数(重点) 总结前言在使用STM32或其他单片机开发项目时,经常需要用到独立按键进行控制. 通常一个独立按键需要使用一个I ...
flex之鸡肋功能——双击编辑列内容
flex中的DataGrid是支持单击编辑单元格内容的,不过这确实不够方便,单击是选中数据的,怎么能变成修改呢!在网上查了看,利用一个DataGrid组件,可以实现双击修改此组件源码为: Doubl ...
多功能按键设计——利用一个I/O口，接一个按键，实现3功能操作：单击 + 双击 + 长按
看了一个晚上,结合了马潮老师的书,才搞懂这个程序,确实经典!原文: 题目:多功能按键设计.利用一个I/O口,接一个按键,实现3功能操作:单击 + 双击 + 长按. (amobbs.com 阿莫电子论坛 ...
简单快速修改大量重复代码(Intellij IDEA)
血与泪的教训啊!!!刚开始不知道,一味地疯狂点鼠标和键盘,点到手抽筋才想起来百度一下如何快速修改大量重复代码,呜呜呜~~~ 给大家分享一下吧,可以节约大家大量的时间哦: 假 ...
x-http-wrapper: 如何解决每次发版时，修改http相关代码造成的错误！(Android、iOS、h5)...
其实是我做了个开源工具(^__^),拿出来给大家鉴赏下,欢迎大家提意见项目:github.com/xuyt11/x-ht- 欢迎关注和star . 功能:这是一个http相关代码的创建工具. 现在我 ...

(单击)双击直接修改内容的代码

(单击)双击直接修改内容的代码相关推荐

最新文章

热门文章