如何修改代码实现选中行变色并重置历史选中行至原颜色？

我来帮你搞定这两个需求，其实核心思路就是用CSS类来管理选中状态，再通过JS控制类的添加和移除，这样代码清晰还容易维护～

1. 实现「选中某行时该行变色，其他已点击行恢复原始颜色」 #

这个需求本质是单选选中——同一时间只有一行处于高亮状态。我们用CSS类标记选中状态，再通过JS统一控制类的添加/移除：

第一步：定义CSS样式 #

先给行设置默认样式和选中后的样式，用类来区分状态：

/* 行的默认样式 */
.table-row {
  background-color: #ffffff;
  cursor: pointer;
  padding: 10px 15px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease; /* 加个过渡动画更丝滑 */
}

/* 选中后的高亮样式 */
.table-row.selected {
  background-color: #e3f2fd; /* 你可以换成任何喜欢的颜色 */
}

第二步：HTML结构示例 #

假设你是用列表/表格展示行内容，结构大概是这样：

<div class="row-list">
  <div class="table-row">第一行内容</div>
  <div class="table-row">第二行内容</div>
  <div class="table-row">第三行内容</div>
</div>

第三步：JavaScript逻辑处理 #

给每一行绑定点击事件，点击时先清空所有行的选中状态，再给当前行添加高亮：

// 获取所有行元素
const allRows = document.querySelectorAll('.table-row');

allRows.forEach(row => {
  row.addEventListener('click', () => {
    // 先把所有行的选中状态移除，恢复原始颜色
    allRows.forEach(r => r.classList.remove('selected'));
    // 再给当前点击的行添加选中类，设置高亮
    row.classList.add('selected');
  });
});

2. 实现「重置此前选中行的颜色」 #

这个功能很简单，只需要一个按钮，点击时移除所有行的selected类即可：

第一步：添加重置按钮 #

在HTML里加一个按钮：

<button id="reset-btn">重置选中状态</button>

第二步：绑定重置事件 #

const resetBtn = document.getElementById('reset-btn');

resetBtn.addEventListener('click', () => {
  // 遍历所有行，移除选中类，恢复原始样式
  allRows.forEach(row => row.classList.remove('selected'));
});

为什么推荐用CSS类而不是直接修改style？ #

• 更易维护：如果要调整高亮颜色，只需要改CSS，不用动JS逻辑
• 性能更好：操作类比直接修改元素内联样式更高效
• 语义化更强：selected类能清晰表达元素的状态，可读性更高

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