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 相关文章推荐
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
js实现登录与注册界面
Nov 01 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
详解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调用数据库的存贮过程!
2006/10/09 PHP
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
php5 图片验证码实现代码
2009/12/11 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
用matplotlib画等高线图详解
2017/12/14 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
python制作简单五子棋游戏
2019/06/18 Python
keras输出预测值和真实值方式
2020/06/27 Python
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
介绍一下RMI的基本概念
2016/12/17 面试题
大学生就业求职信
2014/06/12 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
教育实习指导教师评语
2014/12/31 职场文书
幽灵公主观后感
2015/06/09 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python