请求修改代码：两表格全等颜色图案匹配时触发alert并支持双方案

嘿，我来帮你搞定这个表格匹配的需求！下面是完整的实现代码和思路，不仅能实现基础的颜色形状匹配触发alert，还完美支持两种匹配方案切换~

核心需求可以拆成这几个关键点：

• 构建两个2×6的表格，其中table2预设两种红/黄全等图案
• 通过左上角按钮切换当前要使用的颜色，点击table1单元格完成上色
• 实时检查table1的颜色布局是否和当前选中的table2图案完全一致，一致则弹出alert
• 支持切换两种匹配方案，切换后自动重新检查匹配状态

HTML结构 #

先搭好控制按钮、两个表格的基础结构：

<div class="controls">
  <!-- 颜色选择按钮 -->
  <button class="color-btn active" data-color="white">白色</button>
  <button class="color-btn" data-color="yellow">黄色</button>
  <button class="color-btn" data-color="red">红色</button>
  <!-- 匹配方案切换按钮 -->
  <button class="scheme-btn active" data-scheme="1">方案1</button>
  <button class="scheme-btn" data-scheme="2">方案2</button>
</div>

<!-- 可编辑的表格1 -->
<table id="table1" class="grid-table">
  <tr>
    <td class="white"></td><td class="white"></td><td class="white"></td><td class="white"></td><td class="white"></td><td class="white"></td>
  </tr>
  <tr>
    <td class="white"></td><td class="white"></td><td class="white"></td><td class="white"></td><td class="white"></td><td class="white"></td>
  </tr>
</table>

<!-- 预设图案的表格2（默认隐藏，仅用于对比） -->
<table id="table2" class="grid-table hidden">
  <!-- 方案1的全等图案 -->
  <tbody id="scheme1" class="scheme">
    <tr>
      <td class="red"></td><td class="red"></td><td class="yellow"></td><td class="yellow"></td><td class="red"></td><td class="red"></td>
    </tr>
    <tr>
      <td class="yellow"></td><td class="yellow"></td><td class="red"></td><td class="red"></td><td class="yellow"></td><td class="yellow"></td>
    </tr>
  </tbody>
  <!-- 方案2的全等图案 -->
  <tbody id="scheme2" class="scheme hidden">
    <tr>
      <td class="red"></td><td class="yellow"></td><td class="red"></td><td class="yellow"></td><td class="red"></td><td class="yellow"></td>
    </tr>
    <tr>
      <td class="yellow"></td><td class="red"></td><td class="yellow"></td><td class="red"></td><td class="yellow"></td><td class="red"></td>
    </tr>
  </tbody>
</table>

CSS样式 #

给表格、按钮加上基础样式，让界面更直观：

/* 通用样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 20px;
  font-family: Arial, sans-serif;
}

/* 控制按钮组 */
.controls {
  margin-bottom: 20px;
}
button {
  padding: 8px 16px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
button.active {
  background-color: #2196F3;
  color: white;
  border-color: #2196F3;
}

/* 表格样式 */
.grid-table {
  border-collapse: collapse;
  margin-bottom: 20px;
}
.grid-table td {
  width: 45px;
  height: 45px;
  border: 2px solid #333;
  cursor: pointer;
  transition: background-color 0.2s;
}
/* 颜色类 */
.white { background-color: #ffffff; }
.yellow { background-color: #ffeb3b; }
.red { background-color: #f44336; }
/* 隐藏类 */
.hidden { display: none; }

JavaScript逻辑 #

实现颜色选择、方案切换、匹配检查的核心功能：

// 获取页面元素
const colorBtns = document.querySelectorAll('.color-btn');
const schemeBtns = document.querySelectorAll('.scheme-btn');
const table1Cells = document.querySelectorAll('#table1 td');
const schemes = document.querySelectorAll('.scheme');

// 全局状态：当前选中的颜色和匹配方案
let currentColor = 'white';
let currentScheme = 'scheme1';

// 颜色按钮点击事件：切换当前选中颜色
colorBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    currentColor = btn.dataset.color;
    // 更新按钮高亮状态
    colorBtns.forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
  });
});

// 方案按钮点击事件：切换当前匹配方案
schemeBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const targetSchemeId = `scheme${btn.dataset.scheme}`;
    currentScheme = targetSchemeId;
    // 切换方案显示状态
    schemes.forEach(s => s.classList.add('hidden'));
    document.getElementById(targetSchemeId).classList.remove('hidden');
    // 更新按钮高亮状态
    schemeBtns.forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    // 切换后立即检查匹配
    checkMatch();
  });
});

// table1单元格点击事件：应用当前选中的颜色
table1Cells.forEach(cell => {
  cell.addEventListener('click', () => {
    // 移除原有颜色类，添加新颜色类
    cell.classList.remove('white', 'yellow', 'red');
    cell.classList.add(currentColor);
    // 检查是否匹配当前方案
    checkMatch();
  });
});

// 核心函数：检查table1是否和当前方案的图案完全匹配
function checkMatch() {
  const schemeCells = document.querySelectorAll(`#${currentScheme} td`);
  let isFullMatch = true;

  // 逐个单元格对比颜色
  for (let i = 0; i < table1Cells.length; i++) {
    const table1Cell = table1Cells[i];
    const schemeCell = schemeCells[i];

    // 获取单元格的颜色标识
    const getCellColor = (cell) => {
      if (cell.classList.contains('red')) return 'red';
      if (cell.classList.contains('yellow')) return 'yellow';
      return 'white';
    };

    if (getCellColor(table1Cell) !== getCellColor(schemeCell)) {
      isFullMatch = false;
      break;
    }
  }

  // 如果匹配成功，弹出提示
  if (isFullMatch) {
    alert(`🎉 匹配成功！当前使用方案：${currentScheme.replace('scheme', '')}`);
  }
}

• 两种匹配方案支持：通过两个tbody分别存储方案1和方案2的图案，切换时只显示对应tbody，对比时只取当前方案的单元格数据
• 全等匹配判断：遍历每个单元格的颜色类，确保每个位置的颜色都和目标图案完全一致，实现严格的形状+颜色匹配
• 实时检查机制：每次修改table1单元格颜色或切换匹配方案时，都会自动触发匹配检查，无需手动点击验证

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