如何将<td>中掩码密码切换为真实密码（非input标签实现）

API 探路者

2026-8-15

解决方案

先调整你的PHP/HTML代码，解决两个关键问题：

表格每行的按钮不能用重复的id（会触发选择器冲突），改用class标识
把真实密码存在<td>的自定义data属性里，方便JS读取，同时<td>默认显示掩码密码

修改后的UI代码

<td data-true-password="<?php echo htmlspecialchars($true_password); ?>">
  <?php echo $mask_password; ?>
  <button style="float:right;cursor:pointer;" type="button" class="btneye">
    <i class="fa fa-eye"></i>
  </button>
</td>

注意：用htmlspecialchars()转义真实密码，避免特殊字符（比如引号、尖括号）破坏HTML结构。

JavaScript实现代码

用事件委托绑定点击事件，适配动态生成的表格行：

document.addEventListener('click', function(e) {
  // 只处理.btneye按钮的点击
  const button = e.target.closest('.btneye');
  if (!button) return;

  const td = button.parentElement;
  const truePassword = td.dataset.truePassword;
  // 过滤掉按钮带来的空白字符，获取当前显示的文本
  const currentDisplay = td.textContent.replace(button.textContent, '').trim();

  // 切换显示状态
  if (currentDisplay === truePassword) {
    // 切换回掩码
    td.textContent = '*'.repeat(truePassword.length);
    td.appendChild(button);
    button.querySelector('i').className = 'fa fa-eye';
  } else {
    // 切换为真实密码
    td.textContent = truePassword;
    td.appendChild(button);
    button.querySelector('i').className = 'fa fa-eye-slash';
  }
});