高效的表格行背景隔行变色及选定高亮的JS代码

下面是关于“高效的表格行背景隔行变色及选定高亮的JS代码”的攻略。

一、背景知识

在前端页面制作过程中，常常需要对表格中的数据进行特殊的处理以便更好的呈现给用户。其中对表格进行隔行变色和选定行高亮处理是一种常见的需求。

1. 隔行变色

表格中的隔行变色是一种用于增强视觉效果的技巧，让用户能够更加清晰地看到数据之间的差异性。通常情况下，我们会使用CSS来为表格中的奇数行或偶数行添加特定的背景颜色，以达到隔行变色的目的。

2. 选定高亮

对于用户而言，选定的行需要在页面上能够高亮显示，以便更加清晰地了解所选的内容。而高亮的效果通常是通过在CSS中定义所选行的背景颜色来实现的。

二、实现过程

1. 隔行变色

在实现隔行变色效果时，我们可以将表格中的每一行都看作是一个单独的元素。因此，我们可以使用CSS选择器中的伪类 :nth-child，通过其奇偶性来为表格中的奇数行或偶数行添加特定的背景颜色。

以下是一个简单的隔行变色示例代码：

<style>
  tr:nth-child(2n){
    background-color:#f8f8f8;
  }
</style>

上述代码中，我们为表格的偶数行添加了 #f8f8f8 颜色的背景色。

2. 选定高亮

为了实现选定行高亮的效果，我们需要在表格的行元素中添加一个事件，当所选行被点击时，我们用JS来为其添加一个特定的CSS样式，以便高亮显示。同时，我们需要记住在之前所选的行的CSS样式需要被移除。

以下是一个简单的选定高亮示例代码：

<style>
  .selected {
    background-color: #f8f8f8;
  }
</style>
<script>
  const table = document.querySelector('#table');
  const rows = table.querySelectorAll('tr');

  rows.forEach(row => {
    row.addEventListener('click', () => {
      // 移除之前所选的行的 selected 样式
      const selectedRow = table.querySelector('.selected');
      if (selectedRow) {
        selectedRow.classList.remove('selected');
      }

      //添加选中行的 selected 样式
      row.classList.add('selected');
    })
  })
</script>

<table id="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>19</td>
      <td>女</td>
    </tr>
    <tr>
      <td>小刚</td>
      <td>20</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

在上述代码中，我们首先定义了 .selected 样式，用于表现所选行的高亮效果。然后，我们使用JS来为表格中的每一行元素添加了一个点击事件，在点击事件触发时，为所选行添加 .selected 样式，并移除之前所选的行的 .selected 样式。

三、总结

上述就是实现“高效的表格行背景隔行变色及选定高亮的JS代码”的完整攻略。在实际开发中，以上的两个方法可以进行组合使用，以实现更加复杂和多样的表格展示效果。