点击按钮按data-product值过滤表格行的功能失效问题

嘿，我来帮你解决这个过滤失效的问题！先说说你可能踩的坑，再给你一套可行的实现思路，你可以对照自己的代码排查：

1. 先排查你现有代码的常见问题 #

• 选择器写错了：比如获取按钮的data-product时，是不是写成了data('Product')（大小写错误），或者原生JS里没正确用dataset.product？一定要检查属性名的拼写和大小写！
• 没找准表格里的目标列：比如你要过滤的是第二列，结果用了td:eq(0)（索引从0开始），或者原生JS里误写了row.cells[2]，列索引搞混就完全匹配不上了。
• 逻辑写反了：比如本来要隐藏不匹配的行，结果写成了隐藏匹配的；或者值的类型不匹配（比如data-product是字符串，表格里的内容是数字，用===就会匹配失败）。
• 动态按钮没绑定对事件：如果你的按钮是后端渲染或AJAX加载的动态元素，直接用click绑定事件会失效，得用事件委托才行。

2. 给你一套可直接复用的实现示例 #

先假设你的CSHTML结构大概是这样（和你的实际结构对齐调整即可）：

<!-- 过滤按钮 -->
<button class="filter-btn" data-product="ProductA">Product A</button>
<button class="filter-btn" data-product="ProductB">Product B</button>
<button class="filter-btn" data-product="all">显示全部</button>

<!-- 产品表格 -->
<table id="product-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>产品名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>ProductA</td>
      <td>100</td>
    </tr>
    <tr>
      <td>2</td>
      <td>ProductB</td>
      <td>200</td>
    </tr>
    <tr>
      <td>3</td>
      <td>ProductA</td>
      <td>150</td>
    </tr>
  </tbody>
</table>

方案一：原生JavaScript实现（无需jQuery） #

// 先获取所有过滤按钮和表格行
const filterButtons = document.querySelectorAll('.filter-btn');
const tableRows = document.querySelectorAll('#product-table tbody tr');

// 给每个按钮绑定点击事件
filterButtons.forEach(btn => {
  btn.addEventListener('click', function() {
    // 获取当前按钮对应的产品值
    const targetProduct = this.dataset.product;
    
    // 遍历每一行判断显示/隐藏
    tableRows.forEach(row => {
      // 拿到当前行的产品名称（这里是第二列，索引为1，根据你的实际列调整）
      const rowProduct = row.cells[1].textContent.trim();
      
      // 判断逻辑：要么点了"显示全部"，要么行的产品值和目标值匹配
      if (targetProduct === 'all' || rowProduct === targetProduct) {
        row.style.display = ''; // 显示行
      } else {
        row.style.display = 'none'; // 隐藏不匹配的行
      }
    });
  });
});

方案二：jQuery实现（如果你的项目用了jQuery） #

// 用事件委托绑定，兼容动态生成的按钮
$(document).on('click', '.filter-btn', function() {
  const targetProduct = $(this).data('product');
  
  // 遍历表格每一行
  $('#product-table tbody tr').each(function() {
    // 拿到当前行的产品列内容（eq(1)是第二列，根据实际情况调整）
    const rowProduct = $(this).find('td:eq(1)').text().trim();
    
    // 判断显示/隐藏
    if (targetProduct === 'all' || rowProduct === targetProduct) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

3. 最后给你几个排查小技巧 #

• 打开浏览器控制台（按F12），点击按钮时看看有没有报错，比如“找不到元素”这类提示，说明选择器有问题。
• 在脚本里加console.log(targetProduct)和console.log(rowProduct)，看看实际拿到的值是不是你预期的，比如有没有多余的空格，或者类型不匹配（比如一个是字符串，一个是数字）。
• 如果你的表格是AJAX异步加载的，一定要等表格渲染完成后再执行脚本，或者用事件委托绑定事件。

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