匹配用户名并切换表格行移除按钮显示的jQuery技术问题

原代码核心问题 #

• 过滤表格用户名时硬写固定值，未使用顶部动态获取的用户名
• 错误将jQuery对象与字符串做相等比较，永远无法匹配成功
• 未考虑顶部用户名动态变化场景，无法实时更新按钮状态

修正步骤 #

1. 动态匹配用户名：用获取到的topDivName代替固定字符串过滤表格用户名
2. 修正匹配逻辑：遍历表格行逐个比较用户名，找到匹配行后切换按钮类
3. 封装复用函数：将逻辑封装成函数，方便用户名变化时重复调用

修正后的代码 #

JavaScript 代码

// 封装可复用函数，用于更新移除按钮显示状态
function updateRemoveButtonVisibility() {
  // 获取当前登录用户的用户名，去除前后空格避免匹配误差
  const topDivName = $('.topDiv .nameContainer span').text().trim();
  
  // 先重置所有移除按钮为隐藏状态，避免之前的匹配残留
  $('.table tr button').addClass('hide').removeClass('show');
  
  // 遍历所有表格中的用户名链接
  $(".table td .nameLink").each(function() {
    const currentUserName = $(this).text().trim();
    // 用户名匹配时，显示对应行的移除按钮
    if (currentUserName === topDivName) {
      $(this).closest('tr').find('button').removeClass('hide').addClass('show');
    }
  });
}

// 页面加载完成后执行一次
$(function() {
  updateRemoveButtonVisibility();
  
  // 监听顶部用户名变化，实时更新按钮状态（如果用户名是动态更新的）
  $('.topDiv .nameContainer span').on('DOMSubtreeModified', function() {
    updateRemoveButtonVisibility();
  });
});

CSS 代码

.hide {
  display: none;
  visibility: hidden;
}

.show {
  display: inline-block;
  visibility: visible;
}

HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="topDiv">
  <div class="nameContainer">
    <span>LastName2, FirstName2</span>
  </div>
</div>

<table class="table" width="100%" border="1">
  <tbody>
    <tr>
      <td width="20%"><button class="hide">Remove Row</button></td>
      <td width="20%"><span><a class="nameLink">LastName1, FirstName1</a></span></td>
      <td width="60%">
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
        </p>
      </td>
    </tr>
    <tr>
      <td width="20%"><button class="hide">Remove Row</button></td>
      <td width="20%"><span><a class="nameLink">LastName2, FirstName2</a></span></td>
      <td width="60%">
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
        </p>
      </td>
    </tr>
    <tr>
      <td width="20%"><button class="hide">Remove Row</button></td>
      <td width="20%"><span><a class="nameLink">LastName3, FirstName3</a></span></td>
      <td width="60%">
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
        </p>
      </td>
    </tr>
  </tbody>
</table>

补充说明 #

• 使用trim()处理用户名，避免前后空格导致匹配失败
• 每次执行函数先重置所有按钮状态，确保只有匹配行的按钮显示
• 添加DOMSubtreeModified监听，若顶部用户名通过AJAX等方式动态更新，可自动触发按钮状态更新；若项目中有特定的用户名更新事件，可替换为对应触发方式

内容的提问来源于stack exchange，提问作者Azad Kolachi