<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实现点击查看密码功能,再次点击隐藏密码!的更多相关文章

  1. JS点击img图片放大再次点击缩小JS实现 简单实用Ctrl+C+V就可以用

    业务需要,从后台获取的图片列表,用img标签展示,用户需要查看大图.记录下来以便学习和参考.示例图如下: 放大之前: 放大之后: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto ...

  2. ppt点击文字出现图片,再次点击消失

    实现效果:在PPT一个页面的任意位置,单击左键,出现图片:在图片上,单击左键,图片消失 实现思路:给图片做两个动画,一个进入,文字作触发器,另一个退出,图片本身为触发器. 实现方法: 1.选中图片…… ...

  3. jquery点击添加样式,再次点击移除样式

    $("#divSetting").on("click", function () { $(this).toggleClass("open") ...

  4. JavaScript实现记住密码功能

    用js实现记住密码功能,但是前端记住密码不安全,最好还是不要用.我感觉这个记住密码应该是通过与后台建立一个会话来实现. 这个效果的测试地址在:http://ofoyou.com/blog/rePass ...

  5. java实现记住密码功能(利用cookie)

    <br> <input type="text" id="userName" name="userName" value=& ...

  6. JS点击查看更多内容 控制段落文字展开折叠

    JavaScript+jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容.点击查看更多的功能 ...

  7. js中记住密码功能

    js中记住密码功能(在前端实现) 直接上例子(如果你也要实现的话注意改一些变量名称,jsp代码不包含样式) Jsp代码: <form class="am-form tpl-form-l ...

  8. jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下.   复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...

  9. 【原创】js中利用cookie实现记住密码功能

    在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse res ...

随机推荐

  1. Postman请求运行顺序及Workflow

    作为一款接口调试利器, Postman的更新迭代速度很快, 不断加入了很多新的功能.使的api设计,测试,监控, Mock,以及团队协作更加方便. 修改执行顺序 在遇到有接口依赖的情况, 我们往往需要 ...

  2. Python面试题: 判断IP地址是否合法

    题目: 给出一个字符串, 判断其是否是是合法的IP(IPv4)地址 思路 将字符串按"."分割成4段得到一个列表 逐个判断列表中的字符串是否数字格式并且在0~255之间, 是在新列 ...

  3. 【转】HDU 6194 string string string (2017沈阳网赛-后缀数组)

    转自:http://blog.csdn.net/aozil_yang/article/details/77929216 题意: 告诉你一个字符串和k , 求这个字符串中有多少不同的子串恰好出现了k 次 ...

  4. 基于CentOS 7下最小化安装的操作系统搭建Zabbix3.0环境

    环境说明 系统版本:CentOS Linux release 7.3.1611 (Core) 内核版本:3.10.0-514.el7.x86_64 Httpd版本:Apache/2.4.6 (Cent ...

  5. 一、微服务(Microservices)【翻译】

    1.微服务 “微服务架构(Microservice Architecture)”一词在过去几年里广泛的传播,它用于描述一种设计应用程序的特别方式,作为一套独立可部署的服务.目前,这种架构方式还没有准确 ...

  6. WinPEter制作U盘启动盘

    一.图说WinPE启动U盘的制作 1.首先将U盘插入电脑的USB接口(重要提示:制作过程U盘会被格式化,注意备份资料): 2.解压下载的WinPEU.rar文件: 3.在WinPEU.rar解压目录打 ...

  7. kafka可视化工具安装及简单使用

    一.安装 双击kafkatool_64bit.exe安装kafka可视化工具,并且C:\Windows\System32\drivers\etc配置HOSTS,打开HOSTS并添加: HOSTS添加: ...

  8. OGG ERRORS 总结

    OGG ERRORS 总结 */--> OGG ERRORS 总结 Table of Contents 1. libnnz11.so 2. 00446 2.1. missing filename ...

  9. C# 程序的关闭 讲究解释

    程序的关闭是很讲究的,处理的不好的话,将软件连续开启和关闭,当数次后在启动软件后程序会崩溃.或者程序退出很慢.细节决定成败,一款好的软件应该从各方面都要做严格地反复地推敲,力争做到无可挑剔.    有 ...

  10. hive常用的字符串操作函数