テーブルのすべての行のパスワードを表示および非表示にする方法

Question

表示パスワード機能は、エントリの最初の行でのみ機能し、次のエントリ/行には作用しません。項目は、foreachを使用してデータベースを介してphpによって表示されます。すべてのエントリーのパスワードの表示/非表示はどのようになりますか？何か案は？？

HTML：：

<td data-title="Password"><input id="viewPass" type="password" value="<?php echo $item["password"]; ?>" readonly/></td> 
<button type="button" id="viewPswd" class="btn btn-default"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button> 
<script src="js/showPass.js"></script> 

Javascriptを：

var myButton = document.getElementById('viewPswd'), 
    myInput = document.getElementById('viewPass'); 
    myButton.onclick = function() { 

     'use strict'; 

     if (this.id === 'viewPswd') { 
      myInput.setAttribute('type', 'text'); 
      this.textContent = 'Hide'; 

     } else { 

      myInput.setAttribute('type', 'password'); 

      this.id = 'viewPswd'; 
     } 
    }; 

Answer 1

あなたが複数のボタンやテキストボックスで作業する場合は、 共通nameまたはclassまたはindivdual idを割り当てる必要があります。

すべての要素に同じIDを割り当てることはできません。

ここで私は、問題がId`セレクタは、単一の要素のために働く `です

var myButton = document.getElementsByName('dynamic'); 
 
var myInput = document.getElementsByName('viewPass'); 
 
myButton.forEach(function(element, index){ 
 
    element.onclick = function(){ 
 
    'use strict'; 
 

 
     if (myInput[index].type == 'password') { 
 
      myInput[index].setAttribute('type', 'text'); 
 
      element.firstChild.textContent = 'Hide'; 
 
      element.firstChild.className = ""; 
 

 
     } else { 
 
      myInput[index].setAttribute('type', 'password'); 
 
      element.firstChild.textContent = ''; 
 
      element.firstChild.className = "glyphicon glyphicon-eye-open"; 
 
     } 
 
    } 
 
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<td data-title="Password"> 
 
<input name="viewPass" type="password" value="abcd" readonly/></td> 
 

 

 
<button type="button" id="" class="btn btn-default" name="dynamic"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button> 
 
<br> 
 
<td data-title="Password"> 
 
<input name="viewPass" type="password" value="watha" readonly/></td> 
 

 
<button type="button" id="" class="btn btn-default" name="dynamic"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button> 
 
<br> 
 

 
<td data-title="Password"> 
 
<input name="viewPass" type="password" value="xyz" readonly/></td> 
 

 
<button type="button" id="" class="btn btn-default" name="dynamic"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button>

Answer 2

は基本的にあなたがそのが表示または非表示の場合は、次の時間は、あなたがチェックできるように要素を更新する必要があり、次のように私は、コードを持っています。あなたは州のようなカスタム属性を使うことができます。あなたのための

var myButton = document.getElementById('viewPswd'), 
    myInput = document.getElementById('viewPass'); 
    myButton.onclick = function() { 

     'use strict'; 
      if(this.getAttribute('state') == 'hidden'){ 
      myInput.setAttribute('type', 'text'); 
      this.textContent = 'Hide'; 
      this.setAttribute('state', 'shown'); 

     } else { 
      myInput.setAttribute('type', 'password'); 
        this.setAttribute('state', 'hidden'); 
      this.textContent = 'Show'; 
     } 
    } 

PFB作業例：私たちはここにID属性を使用しているとして、これは1ページに1つのボタンに動作することをhttps://jsfiddle.net/8mfhpy2q/

注意。複数のパスワードフィールドとボタンがある場合、これは異なるでしょう。