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

Question

show password函数仅适用于条目的第一行，不适用于下一个条目/行。使用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

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

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属性。如果有多个密码字段和按钮，则会有所不同。