JS+CSS实现表格高亮的方法

要在网页上实现表格高亮，可以使用JavaScript（JS）和CSS的结合。

步骤一：为表格的每行添加监听事件

首先需要为表格的每一行添加监听事件。可以使用以下JS代码实现：

<table>
  <tr onclick="highlight(this);">
    <td>...</td>
  </tr>
  <tr onclick="highlight(this);">
    <td>...</td>
  </tr>
  ...
</table>
<script>
function highlight(row) {
  if (row.style.backgroundColor === 'yellow') {
    row.style.backgroundColor = '';
  } else {
    row.style.backgroundColor = 'yellow';
  }
}
</script>

在上面的代码中，使用了onclick事件监听函数，当用户点击表格的某一行时，会触发highlight()函数。这个函数会检查当前行是否已经被高亮（即是否已经设置了黄色的背景色），如果已经被高亮，则清除背景色；否则，将背景色设置为黄色。

步骤二：使用CSS设置高亮效果

接下来为表格添加CSS样式来实现高亮效果。可以使用以下CSS代码：

tr:hover {
  background-color: #f5f5f5;
}

在上面的代码中，使用:hover伪类选择器，将鼠标悬停在行上时的背景颜色设置为灰色。

示例一：基础表格的高亮效果

下面的示例演示了如何使用JS和CSS实现一个基础的表格高亮效果。

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr onclick="highlight(this);">
      <td>1</td>
      <td>张三</td>
      <td>男</td>
    </tr>
    <tr onclick="highlight(this);">
      <td>2</td>
      <td>李四</td>
      <td>女</td>
    </tr>
    <tr onclick="highlight(this);">
      <td>3</td>
      <td>王五</td>
      <td>男</td>
    </tr>
  </tbody>
</table>
<style>
tr:hover {
  background-color: #f5f5f5;
}
</style>
<script>
function highlight(row) {
  if (row.style.backgroundColor === 'yellow') {
    row.style.backgroundColor = '';
  } else {
    row.style.backgroundColor = 'yellow';
  }
}
</script>

点击每一行时，会高亮当前行，鼠标悬停在行上时，会变为灰色。

示例二：可控制的表格高亮效果

可以使用以下代码实现一个可控制的表格高亮效果，用户可以通过复选框来选定是否开启高亮效果，也可以选择不同的颜色作为高亮颜色。

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr onclick="highlight(this);">
      <td>1</td>
      <td>张三</td>
      <td>男</td>
    </tr>
    <tr onclick="highlight(this);">
      <td>2</td>
      <td>李四</td>
      <td>女</td>
    </tr>
    <tr onclick="highlight(this);">
      <td>3</td>
      <td>王五</td>
      <td>男</td>
    </tr>
  </tbody>
</table>
<div>
  <label><input type="checkbox" onchange="toggleHighlight();" checked>开启高亮</input></label>
  <label>选择颜色：
    <select onchange="changeColor(this.value);">
      <option value="yellow">黄色</option>
      <option value="#ffcc99">橙色</option>
      <option value="#99ccff">蓝色</option>
    </select>
  </label>
</div>
<style>
.highlight {
  background-color: yellow;
}
</style>
<script>
var highlightOn = true;
var highlightColor = 'yellow';
function toggleHighlight() {
  highlightOn = !highlightOn;
}
function changeColor(value) {
  highlightColor = value;
}
function highlight(row) {
  if (highlightOn) {
    if (row.classList.contains('highlight')) {
      row.classList.remove('highlight');
    } else {
      row.classList.add('highlight');
      row.style.backgroundColor = highlightColor;
    }
  }
}
</script>

在上面的代码中，使用了一个复选框和下拉框，用户可以通过复选框开启或关闭高亮效果，也可以通过下拉框来选择不同的高亮颜色。

以上就是使用JS和CSS实现表格高亮的方法攻略，包含了添加监听事件和使用CSS样式两个步骤，并提供了两个示例，分别演示了基础表格高亮和可控制的表格高亮效果。