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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
javascript实现京东登录显示隐藏密码
Aug 02 Javascript
小程序实现上下切换位置
Nov 16 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
实用函数8
2007/11/08 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
Dom操作之兼容技巧分享
2011/09/20 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
Python批量更改文件名的实现方法
2017/10/29 Python
python3爬虫中异步协程的用法
2020/07/10 Python
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
陕西导游词
2015/02/04 职场文书
搬迁通知
2015/04/20 职场文书
考勤制度通知
2015/04/25 职场文书
债务纠纷代理词
2015/05/25 职场文书
矛盾论读书笔记
2015/06/29 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python