WordPress表格进化指南：表格分类按钮实战

背景

在博客等网站上，如果你有一张内容丰富的表格，比如商品列表、文章分类、项目清单等，查找特定内容可能会很麻烦。尤其是行数很多的时候，读者可能需要翻好几屏才能找到自己关心的条目。

为了让访客能快速找到想要的内容，我们可以给表格加上分类筛选按钮，点击就能显示特定类别的行，使得浏览效率大大提升。

然而，在WordPress默认编辑器里，虽然可以用表格块简单创建表格，但它有几个小问题：

• 无法直接筛选分类：表格本身是静态的，不能通过按钮显示或隐藏特定行；
• 可视化编辑器容易破坏代码：如果在表格里写JavaScript或自定义HTML代码，切换到可视化模式可能会自动修改代码，导致功能失效。

所以，要在不被WordPress编辑器破坏的前提下实现分类筛选、按钮高亮、显示/隐藏行等功能，最好把表格和自定义代码分开处理：

• 表格前放一个HTML块，用于放置类别筛选按钮；
• 页面底部再放一个HTML块，用于写JavaScript筛选逻辑。

这样既能保持表格的可视化编辑体验，又可以让筛选功能正常工作，让读者轻松找到自己感兴趣的内容。

实战

在本篇博文中，我们的分类筛选方法依赖每行的关键词来识别类别。这个关键词甚至可以用Emoji来表示，例如🏅、💬、🎉、🎓等。

此处，如果我们使用emoji来进行分类，那么我们可以在想要添加分类筛选按钮的表格前放置如下的HTML块：

<div id="event-filters" style="margin-bottom:10px; display:flex; gap:8px; flex-wrap:wrap;">
  <button onclick="filterEvents('all')"><strong>全部</strong></button>
  <button onclick="filterEvents('game')"><strong>🏅 竞技</strong></button>
  <button onclick="filterEvents('celebration')"><strong>🎉 庆典</strong></button>
  <button onclick="filterEvents('meeting')"><strong>💬 会议</strong></button>
  <button onclick="filterEvents('academic')"><strong>🎓 娱教</strong></button>
</div>

然后，在页面底部放置另一个HTML块，加入对应的JavaScript代码。这样，上述按钮就能控制表格行的显示和隐藏，让读者轻松找到自己关心的内容。

<script>
function filterEvents(category) {
  const table = document.querySelector('.wp-block-table table');
  const rows = table.querySelectorAll('tbody tr');

  rows.forEach(row => {
    const html = row.innerHTML;
    let rowCategory = '';

    // 根据关键词判断类别（此处使用的是emoji）
    if (html.indexOf('🏅') !== -1) rowCategory = 'game';
    else if (html.indexOf('💬') !== -1) rowCategory = 'meeting';
    else if (html.indexOf('🎉') !== -1) rowCategory = 'celebration';
    else if (html.indexOf('🎓') !== -1) rowCategory = 'academic';

    row.style.display = (category === 'all' || rowCategory === category) ? '' : 'none';
  });

  // 按钮高亮
  const buttons = document.querySelectorAll('#event-filters button');
  buttons.forEach(btn => {
    if (btn.getAttribute('onclick') === `filterEvents('${category}')`) {
      btn.style.backgroundColor = '#0073aa';
      btn.style.color = '#fff';
    } else {
      btn.style.backgroundColor = '';
      btn.style.color = '';
    }
  });
}
</script>

就这样，通过简单的HTML和JavaScript设置，WordPress表格就能轻松实现分类筛选功能了。经过实测，该方法不仅在电脑上可以顺利使用，手机、iPad等移动设备显示也完全正常。特别值得一提的是，由于这些代码与表格本身互相独立，即便在可视化编辑器中，也可以随意修改表格内容而不影响筛选功能。

无论是活动列表、项目清单还是文章汇总，只要合理使用Emoji等关键词，就能让读者快速找到自己感兴趣的内容。不如动手试试，让你的表格变得更聪明、更好用！