如何查看和隐藏表所有行的密码

Question

显示密码功能仅在条目的第一行起作用，而在接下来的条目/行不起作用。 这些项目由php使用foreach通过数据库显示。 显示/隐藏密码对所有条目如何起作用？ 有任何想法吗？？ 我的代码如下：

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或单个id 。

您不能为所有元素分配相同的ID。

在这里我使用了name属性

 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为您提供的工作示例： https : //jsfiddle.net/8mfhpy2q/

请注意，这将适用于每页一个按钮，因为我们在此处使用ID属性。 如果有多个密码字段和按钮，则将有所不同。