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 ...
随机推荐
- spoj5973
SP5973 SELTEAM - Selecting Teams #include <bits/stdc++.h> using namespace std; typedef long lo ...
- javascript数据结构之顺序表
关于线性表的概念这里就不赘述了,可以自行百度和查阅资料,线性表按照存储(物理)结构分为顺序存储和链式存储,每种存储方式的不同决定了它的实现代码是不同的: 顺序存储的特点就是在内存中选一块连续的地址空间 ...
- vue实战教程
转载自 https://www.cnblogs.com/sunsets/p/7760454.html
- logserver 日志服务项目发布
logserver是使用logback.light-4j.commons-exec等构建的简单日志服务,参考项目logbackserver和light4j,支持跟踪日志.分页查看.搜索定位.下载文件等 ...
- LeetCode 215. 数组中的第K个最大元素(Kth Largest Element in an Array)
题目描述 在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5,6,4] 和 k = 2 ...
- 微服务中的CAP定律
说到微服务,先给大家提一下CAP分布式应用知识吧,无论你微服务使用的是阿里云开源的Dubbo还是基于Springboot的一整套实现微服务的Springcloud都必须遵循CAP定理不然你所实现的分布 ...
- 青岛和深圳,两座条件相似的城市,为何GDP相差这么大
深圳和青岛,是一对非常有意思的城市.两者都是沿海城市:两者都是所在省的经济强市:两者都是副省级城市,但都不是省会:两者GDP都超过所在省的省会城市.当然,两个城市也有相当大的差距,一个位于南方,一个位 ...
- 网站title,meta,description如何设置,长度大小多少合适!
转自:http://www.os1010.com/archives/1682 如 何 把 握 html 网 页 中 的 meta 标 签 对于高级的搜索引擎来说,html 的meta 标签并不是什么新 ...
- linux 自动输入用户名和密码 ftp
参考文章: http://blog.sina.com.cn/s/blog_8709e3120101culd.html 方法概括; 1.echo管道 2. 利用重定向操作符command <&l ...
- jmeter 执行python脚本的方法 。(亲测ok)
jmeter 执行python脚本 jmeter 可以通过Jython 执:行python代码 1.下载Jython jar包:http://www.jython.org/downloads.ht ...