不使用jQuery：如何根据用户输入修改表格选中行背景色

云上老周

2026-5-15

嘿，这个需求核心就是要维护两个关键状态：「哪一行被选中」和「当前要显示的颜色」，然后让它们俩联动起来就行。我给你写了一个逻辑清晰、容易扩展的实现方案，完全不用jQuery：

解决方案

核心思路

咱们需要维护两个全局状态变量：

selectedRowIndex：记录当前选中的表格行索引
currentColor：记录用户选择的偏好颜色（默认是空，对应灰色）

然后完成两个核心交互：

表格行点击时：取消之前选中行的样式，给当前行应用当前偏好颜色的样式
颜色按钮点击时：更新偏好颜色，如果已经有选中行，直接把该行样式改成新颜色

完整代码实现

HTML 结构

先把表格和颜色按钮写好，按钮用data-color属性存对应的颜色值，方便JS快速获取：

<table id="dps" border="1">
  <thead>
    <tr>
      <th>序号</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>测试行1</td></tr>
    <tr><td>2</td><td>测试行2</td></tr>
    <tr><td>3</td><td>测试行3</td></tr>
    <tr><td>4</td><td>测试行4</td></tr>
  </tbody>
</table>

<div style="margin-top: 10px;">
  <button data-color="red">切换为红色</button>
  <button data-color="purple">切换为紫色</button>
  <button data-color="blue">切换为蓝色</button>
</div>

CSS 样式

给每个颜色定义对应的类，默认灰色保留你原来的.selected：

/* 默认选中颜色（灰色） */
.selected {
  background-color: grey;
}

/* 各颜色选中样式 */
.selected-red {
  background-color: red;
}
.selected-purple {
  background-color: purple;
}
.selected-blue {
  background-color: blue;
}

/* 可选：给表格行加hover效果，提升交互体验 */
#dps tbody tr {
  cursor: pointer;
}

JavaScript 逻辑

把初始化逻辑拆成两个函数，代码更清晰易维护：

// 全局状态：当前选中行索引、当前偏好颜色
let selectedRowIndex;
let currentColor = ''; // 空字符串对应默认灰色

// 初始化表格点击事件
function initTableEvents() {
  const table = document.getElementById('dps');
  // 遍历所有tbody行（跳过表头，从索引1开始）
  for (let i = 1; i < table.rows.length; i++) {
    table.rows[i].addEventListener('click', function() {
      const currentRow = this;
      
      // 1. 清除之前选中行的所有颜色类
      if (selectedRowIndex !== undefined) {
        const prevRow = table.rows[selectedRowIndex];
        prevRow.classList.remove('selected', 'selected-red', 'selected-purple', 'selected-blue');
      }
      
      // 2. 给当前行应用对应颜色的类
      if (currentColor) {
        currentRow.classList.add(`selected-${currentColor}`);
      } else {
        currentRow.classList.add('selected');
      }
      
      // 3. 更新选中行索引
      selectedRowIndex = currentRow.rowIndex;
    });
  }
}

// 初始化颜色按钮事件
function initColorButtonEvents() {
  const colorButtons = document.querySelectorAll('[data-color]');
  colorButtons.forEach(button => {
    button.addEventListener('click', function() {
      // 更新当前偏好颜色
      currentColor = this.dataset.color;
      
      // 如果已经有选中行，直接更新它的颜色
      if (selectedRowIndex !== undefined) {
        const table = document.getElementById('dps');
        const selectedRow = table.rows[selectedRowIndex];
        // 先清除所有旧颜色类，再添加新的
        selectedRow.classList.remove('selected', 'selected-red', 'selected-purple', 'selected-blue');
        selectedRow.classList.add(`selected-${currentColor}`);
      }
    });
  });
}

// 页面加载完成后初始化所有事件
window.addEventListener('DOMContentLoaded', function() {
  initTableEvents();
  initColorButtonEvents();
});

方案优势

双向支持：不管是先点击表格行（显示灰色）再点按钮切换颜色，还是先选颜色再点表格行直接应用，都能正常工作
状态可控：避免了原代码中toggle可能导致的样式混乱问题，改用直接添加/移除类，逻辑更清晰
易于扩展：如果要新增颜色，只需要加一个CSS类和一个带data-color的按钮，不用修改JS核心逻辑
性能友好：只操作DOM中需要改变的元素，没有多余的遍历

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