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 相关文章推荐
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
vue vant中picker组件的使用
Nov 03 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
php下使用无限生命期Session的方法
2007/03/16 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
Vue实现table上下移动功能示例
2019/02/21 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
Python写的服务监控程序实例
2015/01/31 Python
python实现扫描日志关键字的示例
2018/04/28 Python
python实现输入数字的连续加减方法
2018/06/22 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
python爬虫超时的处理的实例
2018/12/19 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
python每天定时运行某程序代码
2019/08/16 Python
Python随机数函数代码实例解析
2020/02/09 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
浅谈Python __init__.py的作用
2020/10/28 Python
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
酒店值班经理的工作职责范本
2014/02/18 职场文书
运动会演讲稿100字
2014/08/25 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
自我检讨报告
2015/01/28 职场文书
药房管理制度范本
2015/08/06 职场文书
七年级作文之环保作文
2019/10/17 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang
纯html+css实现打字效果
2021/08/02 HTML / CSS
MySQL中的隐藏列的具体查看
2021/09/04 MySQL