<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. Django-事务和锁

    一.事务 1.全局开启事务 在Web应用中,常用的事务处理方式是将每个请求都包裹在一个事务中.这个功能使用起来非常简单,你只需要将它的配置项ATOMIC_REQUESTS设置为True. 它是这样工作 ...

  2. C#操作 Access 2013(.accdb)的方法

    使用的Microsoft.Jet.OLEDB.4.0,的方法并不能连接最新的Access 存储文件,而且Microsoft.Jet.OLEDB.4.0不能使用x64的方式生成,而且使用这个数据库引擎效 ...

  3. ORACLE表名与列名小写转成大写

    批量将表名变为大写 begin for c in (select table_name tn from user_tables where table_name <> upper(tabl ...

  4. mitmproxy修改二级代理

    第一步 mitmweb --mode upstream:http://114.240.101.242:5672 -s server.py 第二步 def request(self, flow: mit ...

  5. ARP 之 发送请求arp_solicit

    概述 arp_solicit用来发送ARP请求,首先会根据ARP_ANNOUNCE参数来选取源地址,然后判断是否达到内核发送次数上限,未达到则调用内核arp_send_dst函数发送,如果达到上限,则 ...

  6. mongodb 的云数据库产品 atlas 的使用

    前言:最近发现 mlab 被mongodb 收购以后,不再支持新用户,推荐使用 MongoDB Atlas 第一步:注册或登陆 在MongoDB atlas首页,如果有账号,那就点击登陆.否则点击Ge ...

  7. chrome新版本flash无法在http网站上运行的解决办法

    最近遇到一个问题,就是用chrome浏览器打开网站后台以后,使用flash插件上传文件失败,提示flash初始化失败,于是打开chrome的内容设置,准备启用flash功能,打开浏览器,在地址栏中输入 ...

  8. Java之加密算法

    加密算法主要分为对称加密.非对称加密.Hash加密. 一.何为对称加密? 对称加密是指对称密码编码技术,它的特点是文件加密和解密使用相同的密钥加密. 对称机密的密钥一般小于256bit.因为就密钥而言 ...

  9. delphi treeview的子节点图标?

    代码实现不同的子节点图标效果. unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, ...

  10. CentOS里查看内存的使用

    转自 http://blog.csdn.net/blueman2012/article/details/6904597