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 ...
随机推荐
- javascript数据结构之队列
首先什么是队列? 排队买东西就是生活中队列的实际例子,在队伍中大家必须按照顺序来,不能插队,新来的人只能排在队伍的最后面.新加入的人相当于队列的后端加入的元素,队伍最前面买完东西的人离开队伍相当于是队 ...
- php 一段 shmop
$size = 1024*1024; $shm_key = ftok(__FILE__, 't'); $shm_id = shmop_open($shm_key, "c", 064 ...
- 9.Spring Cloud Config统一管理微服务配置
Spring Cloud Config统一管理微服务配置 9.1. 为什么要统一管理微服务配置 9.2. Spring Cloud Config简介 Spring Cloud Config为分布式系统 ...
- 定时从linux获取信息放到windows上
环境:windows上代码路径下存放:WinSCP-5.13.8-Setup.exe 第一步:test.txt 拉取脚本的txt文本 解析:存放从linux路径下拉取所需源文件zyy_count. ...
- 【sed】进阶
sed的基本用法已能满足大多数需求,但当需要时,知道这些高级特效的存在及如何使用将提供莫大的帮助! 1. 多行命令 sed编辑器提供三个用于处理多行文本的特殊命令: N:将数据 ...
- centOS7搭建hadoop,zookeeper,hbase
1.配置ssh免密登录 (本人使用的是centOS7虚拟机) (本人未在root用户下安装,建议使用root用户,不然很麻烦!!) ① 本机无密钥登录 1.进入~/.ssh目录(若无,则执行一次ssh ...
- Mybati example generatorConfig.xml 配置详解
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfiguration ...
- ThreadLocal详解【使用场景】
转: 么是ThreadLocal 根据JDK文档中的解释:ThreadLocal的作用是提供线程内的局部变量,这种变量在多线程环境下访问时能够保证各个线程里变量的独立性. 从这里可以看出,引入Thre ...
- Linux 查看CPU和内存的使用情况
Linux 查看CPU和内存的使用情况 如何查看Linux机器的CPU和内存的使用情况. 可以通过如下方式: 1.查看CPU和内存的实时使用情况 使用如下命令: top 命令执行后,效果如下(资源的使 ...
- java+web文件的上传和下载代码
一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了.我这里分享一下我自己开发的一套大文件上传控件 ...