테이블의 모든 행에 대한 암호보기 및 숨기기 방법

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> 

자바 스크립트 :

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를 할당 할 수는 없습니다.

저는 여기 name 속성 문제 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 속성을 사용하는 것처럼이 페이지 당 하나 개의 버튼 작동합니다 https://jsfiddle.net/8mfhpy2q/

참고. 암호 필드와 버튼이 여러 개인 경우 이는 다를 수 있습니다.