JS实现点击按钮可实现编辑功能


Posted in Javascript onJuly 03, 2018

具体代码如下所示:

<script type="text/javascript">
//修改密码
//抓取到的数据
function edit() {
document.getElementById("ps").style.display = "none";
document.getElementById("pw").style.display = "";
document.getElementById("of").style.display = "";
var butt = document.getElementById("btt");
butt.value = "修 改";
butt.onclick = function () {
save();//第二次单击的时候执行这个函数
};
}
//取消健
function off() {
var pass = document.getElementById('ps');
var pws = document.getElementById("pw");
var butt = document.getElementById("btt");
document.getElementById("of").style.display = "none",
butt.value = "编 辑";
pws.style.display = "none";
pass.innerHTML = pws.value;
pass.style.display = "";
butt.onclick = function () {
edit();//还原第一次单击的时候执行的函数
};
}
//编辑之后的状态
function save() {
var pass = document.getElementById('ps');
var pws = document.getElementById("pw");
var butt = document.getElementById("btt");
butt.setAttribute("type","submit");
butt.value = "编 辑";
pws.style.display = "none";
pass.innerHTML = pws.value;
pass.style.display = "";
butt.onclick = function () {
edit();//还原第一次单击的时候执行的函数
};
}
</script>
</p>
<form action="oneself.php" method="post">
<p style="font: 16px '宋体';">姓名: <input type="text" name="name" value="张三" /></p>
<p style="font: 16px '宋体';">账号: <input type="text" name="handset" value="13888888888" /></p>
<p style="font: 16px '宋体';">密码: <span id="pass" style="border: 1px solid gray; width: 200px;">888888</span> <textarea id="ei" style="display: none;" name="newpass">888888</textarea> <input id="btt" onclick="edit();" type="button" name="btt" value="编 辑" /> <input id="of" style="display: none;" onclick="off();" type="button" name="of" value="取 消" /></p>
</form>

总结

以上所述是小编给大家介绍的JS实现点击按钮可实现编辑功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
微信jssdk用法汇总
Jul 16 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
微信小程序常用简易小函数总结
Feb 01 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
Vue3.0数据响应式原理详解
Oct 09 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 #Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 #Javascript
基于React+Redux的SSR实现方法
Jul 03 #Javascript
VUE 3D轮播图封装实现方法
Jul 03 #Javascript
vue.js轮播图组件使用方法详解
Jul 03 #Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 #Javascript
解析vue data不可以使用箭头函数问题
Jul 03 #Javascript
You might like
php 购物车实例(申精)
2009/05/11 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
Python 面向对象 成员的访问约束
2008/12/23 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
python对象与json相互转换的方法
2019/05/07 Python
python中dict使用方法详解
2019/07/17 Python
对Django外键关系的描述
2019/07/26 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
班长岗位职责
2013/11/10 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
保安公司服务承诺书
2014/05/28 职场文书
出差报告范文
2014/11/06 职场文书
企业百日安全活动总结
2015/05/07 职场文书
2016年国陪研修感言
2015/11/18 职场文书
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android
Python装饰器的练习题
2021/11/23 Python