如何用JavaScript-jQ基于条件与随机值给表格对应行单元格上色

1. 页面结构（HTML） #

先搭建符合需求的基础表格结构：

<!-- 上方Pin表格 -->
<table id="pinTable" border="1">
  <thead>
    <tr>
      <th>Pin</th>
      <th>随机数</th>
      <th>Direction</th>
    </tr>
  </thead>
  <tbody>
    <!-- 5行数据将通过JS动态生成 -->
  </tbody>
</table>

<!-- 下方游戏表格 -->
<table id="gameTable" border="1">
  <tr>
    <td id="row1-1"></td>
    <td id="row1-2" class="start"></td> <!-- 起始单元格 -->
    <td id="row1-3"></td>
  </tr>
  <tr>
    <td id="row2-1"></td>
    <td id="row2-2"></td>
    <td id="row2-3"></td>
  </tr>
  <tr>
    <td id="row3-1"></td>
    <td id="row3-2"></td>
    <td id="row3-3"></td>
  </tr>
  <tr>
    <td id="row4-1"></td>
    <td id="row4-2"></td>
    <td id="row4-3"></td>
  </tr>
  <tr>
    <td id="row5-1"></td>
    <td id="row5-2"></td>
    <td id="row5-3"></td>
  </tr>
  <tr>
    <td id="row6-1"></td>
    <td id="row6-2"></td>
    <td id="row6-3"></td>
  </tr>
</table>

<style>
  td { width: 50px; height: 50px; text-align: center; }
  .colored { background-color: #4CAF50; }
  .start { background-color: #FFC107; }
</style>

2. 核心逻辑（JavaScript-jQuery） #

直接实现Pin数据生成、移动上色的完整逻辑：

$(document).ready(function() {
  // 1. 生成上方Pin表格的5行数据
  const pinTableBody = $('#pinTable tbody');
  const pinData = [];
  for (let i = 1; i <= 5; i++) {
    const randomNum = Math.floor(Math.random() * 100) + 1;
    const direction = randomNum >= 50 ? 'right' : 'left';
    pinData.push({ pin: i, num: randomNum, dir: direction });
    
    // 渲染到表格
    const row = `<tr>
      <td>${i}</td>
      <td>${randomNum}</td>
      <td>${direction}</td>
    </tr>`;
    pinTableBody.append(row);
  }

  // 2. 处理游戏移动和上色逻辑
  let currentRow = 1;
  let currentCol = 2; // 起始位置为row1-2

  // 遍历每个Pin数据，依次执行移动逻辑
  pinData.forEach(pin => {
    // 进入下一行
    currentRow += 1;
    // 根据方向调整列位置
    if (pin.dir === 'left') {
      currentCol -= 1;
    } else {
      currentCol += 1;
    }
    // 防止列越界（限制在1-3范围内）
    currentCol = Math.max(1, Math.min(3, currentCol));
    // 给目标单元格上色
    $(`#row${currentRow}-${currentCol}`).addClass('colored');
  });
});

3. 关键逻辑说明 #

• Pin数据生成：循环生成5组数据，通过Math.random()生成1-100的随机数，判断后设置方向，同时渲染到上方表格。
• 位置计算：从起始位置row1-2（行1，列2）开始，每处理一个Pin就进入下一行，根据方向调整列索引（左移减1，右移加1）。
• 边界处理：用Math.max和Math.min确保列始终在1-3之间，避免出现无效的单元格ID。
• 上色操作：通过jQuery选择器定位目标单元格，添加colored类实现背景色标记。

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