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+數字了