JavaScript入门：实现数组元素与表格数字匹配并标记背景色

首先假设你的表格结构大致如下（方便理解JS逻辑，你可以根据实际结构调整）：

<table id="numberTable">
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
  </tr>
  <tr>
    <td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
  </tr>
  <!-- 剩余行直到20 -->
</table>
<button id="drawBtn">抽取下一个数字</button>

下面是整合了你现有逻辑的核心JavaScript代码，重点实现了抽取数字后标记表格对应单元格的功能：

// 生成1-20的数组并通过Fisher-Yates算法打乱（保证随机公平性）
function generateShuffledNumbers() {
  const numbers = Array.from({ length: 20 }, (_, idx) => idx + 1);
  for (let i = numbers.length - 1; i > 0; i--) {
    const randomIdx = Math.floor(Math.random() * (i + 1));
    [numbers[i], numbers[randomIdx]] = [numbers[randomIdx], numbers[i]];
  }
  return numbers;
}

// 初始化全局变量
const shuffledNumbers = generateShuffledNumbers();
let currentDrawIndex = 0;
const drawBtn = document.getElementById('drawBtn');
const numberTable = document.getElementById('numberTable');

// 按钮点击事件：抽取数字+标记表格
drawBtn.addEventListener('click', () => {
  // 边界判断：所有数字抽完后禁用按钮并提示
  if (currentDrawIndex >= shuffledNumbers.length) {
    alert('所有数字已抽取完毕！');
    drawBtn.disabled = true;
    return;
  }

  // 获取当前抽取的数字
  const currentNumber = shuffledNumbers[currentDrawIndex];
  currentDrawIndex++;

  // 可选：在控制台或页面显示抽取的数字
  console.log(`本次抽取数字：${currentNumber}`);
  // 若要在页面显示，可提前加一个元素：document.getElementById('displayArea').textContent = currentNumber;

  // 核心逻辑：找到表格中对应数字的单元格并标记背景色
  const allCells = numberTable.querySelectorAll('td');
  allCells.forEach(cell => {
    // 注意转换为数字类型再匹配，避免字符串比较问题
    if (parseInt(cell.textContent.trim()) === currentNumber) {
      // 方式1：直接修改行内样式
      cell.style.backgroundColor = '#f08080';
      // 方式2：添加CSS类（推荐，样式更易维护，需提前定义.marked类）
      // cell.classList.add('marked');
    }
  });
});

关键细节补充： #

• 高效匹配：如果你的表格单元格有统一类名（比如.num-cell），可以把querySelectorAll('td')改成querySelectorAll('.num-cell')，减少遍历范围。
• 样式维护：推荐用CSS类代替直接修改style，比如在样式表中定义：

  .marked {
    background-color: #f08080;
    color: #fff;
    font-weight: bold;
  }
  

  然后JS中用cell.classList.add('marked')来标记，后续修改样式无需改动JS。
• 重复抽取防护：如果需要防止重复抽取（比如数组可能重复），可以在标记后把已抽取的数字从数组中移除，或者用一个集合记录已抽取的数字。

如果你已经有自己的数组生成和按钮点击逻辑，只需要把以下核心标记代码嵌入到你的点击事件中即可：

// 假设currentNumber是你当前抽取的数字
const currentNumber = /* 你的抽取数字变量 */;
document.querySelectorAll('#numberTable td').forEach(cell => {
  if (parseInt(cell.textContent.trim()) === currentNumber) {
    cell.classList.add('marked');
  }
});

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