js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色

实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色的过程分为以下几步：

1. HTML结构构建

先构建一个table，需要注意每个单元格需要有一个唯一的id值，如下所示：

<table id="myGridview">
  <thead>
    <tr>
      <th>ID</th>
      <th>名称</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr id="row1">
      <td>1</td>
      <td>测试1</td>
      <td><button>编辑</button></td>
    </tr>
    <tr id="row2">
      <td>2</td>
      <td>测试2</td>
      <td><button>编辑</button></td>
    </tr>
    <tr id="row3">
      <td>3</td>
      <td>测试3</td>
      <td><button>编辑</button></td>
    </tr>
  </tbody>
</table>

1. CSS样式定义

定义表格的CSS样式，如下所示：

#myGridview {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  font-family: Arial, sans-serif;
}

#myGridview th, #myGridview td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}

#myGridview th {
  background-color: #f2f2f2;
}

#myGridview tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

#myGridview tbody tr:hover {
  background-color: #f2f2f2;
}

#myGridview tbody tr.selected {
  background-color: #d9edf7;
}

#myGridview tbody tr.selected:hover {
  background-color: #bce8f1;
}

1. JS实现交替行、选中行、鼠标移动行背景色效果

为了保证只有一行被选中，需要使用一个变量来保存当前被选中的行的id，代码如下所示：

var selectedRowId = null;

接下来，在表格的每一行上都绑定一个click事件和mouseover事件，用于处理交替行和选中行的效果，代码如下所示：

var rows = document.querySelector("#myGridview tbody").rows;

for (var i = 0; i < rows.length; i++) {
  rows[i].addEventListener("click", function() {
    // 取消原来选中的行的选中状态
    if (selectedRowId) {
      document.querySelector("#" + selectedRowId).classList.remove("selected");
    }
    // 设置当前行的选中状态
    this.classList.add("selected");
    selectedRowId = this.id;
  });

  rows[i].addEventListener("mouseover", function() {
    // 取消原来选中的行的选中状态
    if (selectedRowId) {
      document.querySelector("#" + selectedRowId).classList.remove("selected");
    }
    // 设置当前行的选中状态
    this.classList.add("selected");
    selectedRowId = this.id;
  });
}

在鼠标离开行时，需要将其选中状态取消，代码如下所示：

for (var i = 0; i < rows.length; i++) {
  rows[i].addEventListener("mouseout", function() {
    if (this.id !== selectedRowId) {
      this.classList.remove("selected");
    }
  });
}

这样就可以实现交替行、选中行、鼠标移动行背景色效果了。

示例1: 点击行，该行背景色变为蓝色，其他行背景色恢复默认，代码演示：https://codepen.io/tianhenglin/pen/JjPRQgN

示例2: 鼠标悬停行，该行背景色变为灰色，鼠标移出行，该行背景色恢复默认，其他行背景色恢复默认，代码演示：https://codepen.io/tianhenglin/pen/zYzQwNg