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

Question

显示密码功能仅对条目的第一行有效，对下一行无效entries/rows。 php 使用 foreach 通过数据库显示项目。 show/hide 密码如何对所有条目起作用？有任何想法吗？？我的代码如下：

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

基本上您需要更新元素，以便下次您可以检查它是显示还是隐藏。您可以使用状态等自定义属性。

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 属性。如果有多个密码字段和按钮，这将是不同的。

Answer 2

如果你想使用多个按钮和文本框，你必须分配常见的 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>

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

How to View and Hide Password for all rows of the table

javascript

php

html

password-encryption