如何实现点击按钮隐藏数据库加载的HTML表格中指定状态的行

这事儿其实用前端JavaScript就能轻松搞定，不用麻烦后端重新查询数据库。我给你整理了一套完整的实现方案，直接替换你的现有代码就行：

1. 先添加过滤按钮 #

咱们在表格的上方放三个按钮（还额外加了「显示全部」按钮，方便用户快速切换回完整数据），每个按钮用data-status属性存储对应的状态值，这样JS能轻松拿到要过滤的状态：

<div class="filter-buttons">
  <button class="status-filter" data-status="all">Show All</button>
  <button class="status-filter" data-status="Online">Show Online</button>
  <button class="status-filter" data-status="Offline">Show Offline</button>
  <button class="status-filter" data-status="Disconnected">Show Disconnected</button>
</div>

2. 编写JavaScript过滤逻辑 #

接下来写核心的过滤功能，思路非常直白：

• 等页面加载完成后，给所有过滤按钮绑定点击事件
• 点击按钮时，获取按钮对应的目标状态
• 遍历表格里的每一行（跳过表头的第一行）
• 检查每行最后一个单元格（Status列）的内容，和目标状态匹配就显示，不匹配就隐藏

<script>
// 确保页面元素都加载完成再执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有过滤按钮和目标表格
  const filterButtons = document.querySelectorAll('.status-filter');
  const table = document.getElementById('main_table');
  // 获取表格里的所有数据行（排除表头行）
  const rows = table.querySelectorAll('tr:not(:first-child)');

  // 给每个按钮绑定点击事件
  filterButtons.forEach(button => {
    button.addEventListener('click', function() {
      const targetStatus = this.getAttribute('data-status');

      // 遍历每一行判断显示/隐藏
      rows.forEach(row => {
        // 提取当前行的Status内容，去掉首尾空格避免匹配出错
        const rowStatus = row.querySelector('td:last-child').textContent.trim();
        
        if (targetStatus === 'all' || rowStatus === targetStatus) {
          row.style.display = ''; // 显示行
        } else {
          row.style.display = 'none'; // 隐藏行
        }
      });
    });
  });
});
</script>

3. 整合完整代码 #

把按钮、原PHP表格代码和JS逻辑整合到一起，就是最终可用的完整代码：

<div class="filter-buttons">
  <button class="status-filter" data-status="all">Show All</button>
  <button class="status-filter" data-status="Online">Show Online</button>
  <button class="status-filter" data-status="Offline">Show Offline</button>
  <button class="status-filter" data-status="Disconnected">Show Disconnected</button>
</div>

<table id="main_table">
  <tr>
    <td>Id</td>
    <td>Agent Name</td>
    <td>Agent Rank</td>
    <td>Agent Location</td>
    <td>Status</td>
  </tr>
  <?php 
    require 'CMS/processing/conn.php'; 
    $result = mysqli_query($con,"SELECT * FROM agents"); 
    while($info = mysqli_fetch_array($result)) { 
  ?>
  <tr>
    <td><?php echo $info['id']; ?></td>
    <td><?php echo $info['agentName']; ?></td>
    <td><?php echo $info['agentRank']; ?></td>
    <td><?php echo $info['locationNames']; ?></td>
    <td><?php echo $info['agentStatus']; ?></td>
  </tr>
  <?php } ?>
</table>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const filterButtons = document.querySelectorAll('.status-filter');
  const table = document.getElementById('main_table');
  const rows = table.querySelectorAll('tr:not(:first-child)');

  filterButtons.forEach(button => {
    button.addEventListener('click', function() {
      const targetStatus = this.getAttribute('data-status');

      rows.forEach(row => {
        const rowStatus = row.querySelector('td:last-child').textContent.trim();
        
        if (targetStatus === 'all' || rowStatus === targetStatus) {
          row.style.display = '';
        } else {
          row.style.display = 'none';
        }
      });
    });
  });
});
</script>

额外优化（可选） #

如果想让按钮交互更直观，可以加个简单的CSS样式，给当前激活的过滤按钮加高亮效果：

<style>
.filter-buttons {
  margin-bottom: 15px;
}
.status-filter {
  padding: 8px 12px;
  margin-right: 8px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}
.status-filter.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}
</style>

然后修改JS代码，点击按钮时给当前按钮添加active类，同时移除其他按钮的该类：

// 在按钮点击事件中添加这两行代码
filterButtons.forEach(btn => btn.classList.remove('active'));
this.classList.add('active');

这样用户就能一眼看到当前选中的过滤状态啦～

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