JS实现点击查看密码功能,再次点击隐藏密码!
<table border='1'>
<tr>
<td>aaaa</td>
<td onclick="myFunction(this.id)" id='pass0'>密码点击查看</td>
</tr>
<tr>
<td>bbb</td>
<td onclick="myFunction(this.id)" id='pass1'>密码点击查看</td>
</tr>
<tr>
<td>ccc</td>
<td onclick="myFunction(this.id)" id='pass2'>密码点击查看</td>
</tr>
<tr>
<td>ddd</td>
<td onclick="myFunction(this.id)" id='pass3'>密码点击查看</td>
</tr>
</table>
<script>
function myFunction(id){
var x = document.getElementById(id).innerHTML;
var password = ['12364','bbb','555666','abcdefg'];
if(x == '密码点击查看'){
for(var i = 0, l = password.length; i<l; i++){
if(id == ('pass'+i)){
document.getElementById(id).innerHTML = password[i];
}else{
document.getElementById(id).innerHTML = '密码点击查看';
}
}
}
}
</script>
一个函数搞定。 根据传入的id,判断id是否与循环相等,如果相等,则输出password。
td元素的id与password的元素下标相对应,就能实现准确无误的输出!
为了避免id重复(单纯的一个数字太容易重复),在函数中加个字符串就搞定。 这样td元素的id就可以写成pass+数字了
JS实现点击查看密码功能,再次点击隐藏密码!的更多相关文章
- JS点击img图片放大再次点击缩小JS实现 简单实用Ctrl+C+V就可以用
业务需要,从后台获取的图片列表,用img标签展示,用户需要查看大图.记录下来以便学习和参考.示例图如下: 放大之前: 放大之后: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto ...
- ppt点击文字出现图片,再次点击消失
实现效果:在PPT一个页面的任意位置,单击左键,出现图片:在图片上,单击左键,图片消失 实现思路:给图片做两个动画,一个进入,文字作触发器,另一个退出,图片本身为触发器. 实现方法: 1.选中图片…… ...
- jquery点击添加样式,再次点击移除样式
$("#divSetting").on("click", function () { $(this).toggleClass("open") ...
- JavaScript实现记住密码功能
用js实现记住密码功能,但是前端记住密码不安全,最好还是不要用.我感觉这个记住密码应该是通过与后台建立一个会话来实现. 这个效果的测试地址在:http://ofoyou.com/blog/rePass ...
- java实现记住密码功能(利用cookie)
<br> <input type="text" id="userName" name="userName" value=& ...
- JS点击查看更多内容 控制段落文字展开折叠
JavaScript+jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容.点击查看更多的功能 ...
- js中记住密码功能
js中记住密码功能(在前端实现) 直接上例子(如果你也要实现的话注意改一些变量名称,jsp代码不包含样式) Jsp代码: <form class="am-form tpl-form-l ...
- jquery.cookie.js 操作cookie实现记住密码功能的实现代码
jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下. 复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...
- 【原创】js中利用cookie实现记住密码功能
在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse res ...
随机推荐
- 百度AI接口调用
创建应用 登录网站 登录www.ai.baidu.com 进入控制台 进入语音技术 创建应用 管理应用 技术文档 SDK开发文档 接口能力 版本更新记录 注意事项 目前本SDK的功能同REST API ...
- POJ 1144 Network —— (找割点)
这是一题找无向图的割点的模板题,割点的概念什么的就不再赘述了.这里讲一下这个模板的一个注意点. dfs中有一个child,它不等于G[u].size()!理由如下: 如上图,1的size是2,但是它的 ...
- mybatis sql不等于
转载地址: https://blog.csdn.net/weixin_40797576/article/details/78796028 select * from test where id& ...
- TreeView 三种状态 没多大变化 只是增加了很多函数以方便调用
using System.Drawing; using System.Windows.Forms; using System.ComponentModel; namespace SimpleCusto ...
- thinkphp5的控制器调用自身模块和调用其他模块的方法
以user为例,调用user.php的get_number()方法 一.不管是调用自身模块还是其他模块app\model\User.php写法不变 <?php namespace app\ind ...
- iOS tableHeaderView有默认高度?
在给tableView设置tableHeaderView的时候发现,如果设置tableView.tableHeaderView = [UIView new] , 这里未设置tableView的高度,但 ...
- 大数据HIve
1. 题目说明 设计题:MySQL数据库A有1000w条数据,完成统计再输入到另外的B表中 A表 test1 0.2,3.5,1,1test1 1.2,2.3,4.56test2 2.1,0.3,9. ...
- R语言与概率统计(一) 描述性统计分析
#查看已安装的包,查看已载入的包,查看包的介绍 ########例题3.1 #向量的输入方法 w<-c(75.0, 64.0, 47.4, 66.9, 62.2, 62.2, 58.7, 6 ...
- three.js效果之热力图和轨迹线
1.热力图 开始的时候,是用一个网上找的canvas画渐变热点的demo,原理就是给定顶点坐标,然后画圆,颜色使用渐变色,根据权重决定渐变的层数(红色->橙色->绿色) . 但是终究觉得这 ...
- 不可不知的JavaScript 之 JSON对象和JavaScript对象直接量
JSON对象和JS对象直接量 在工作当中,我们总是可以听到人说将数据转换为JSON对象,或者说把JSON对象转换为字符串之类的话,下面是关于JSON的具体说明. JSON对象并不是JavaScript ...