表格奇偶行设置不同颜色的核心JS代码

下面是详细讲解“表格奇偶行设置不同颜色的核心JS代码”的完整攻略，希望能为您提供帮助。

一、需求描述

我们需要让表格的奇偶行显示不同的背景色，让表格更易于阅读。

二、实现思路

1. 首先，需要获取所有的表格行。
2. 接着，需要使用 JavaScript 循环遍历表格行。
3. 判断每一行的索引值是否是奇数或偶数。
4. 根据判断的结果，设置不同的背景色。

三、核心JS代码

const rows = document.querySelectorAll('table tr');

for (let i = 0; i < rows.length; i++) {
  if (i % 2 === 0) {
    rows[i].style.backgroundColor = '#f2f2f2';
  } else {
    rows[i].style.backgroundColor = '#ffffff';
  }
}

以上代码解析：

1. 首先，使用 document.querySelectorAll() 方法获取所有的表格行 tr。
2. 使用 for 循环遍历每一行。
3. 判断每一行的索引值是否为偶数。如果是偶数，设置背景色为 #f2f2f2；否则，设置背景色为 #ffffff。

四、示例说明

示例一：

假设我们有如下表格：

<table>
  <tr>
    <th>编号</th>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>001</td>
    <td>张三</td>
    <td>18</td>
  </tr>
  <tr>
    <td>002</td>
    <td>李四</td>
    <td>20</td>
  </tr>
  <tr>
    <td>003</td>
    <td>王五</td>
    <td>22</td>
  </tr>
</table>

运行示例一的代码：

const rows = document.querySelectorAll('table tr');

for (let i = 0; i < rows.length; i++) {
  if (i % 2 === 0) {
    rows[i].style.backgroundColor = '#f2f2f2';
  } else {
    rows[i].style.backgroundColor = '#ffffff';
  }
}

运行后，表格的奇偶行将会分别显示为不同的背景色。

示例二：

假设我们需要将表格的奇偶行显示为不同的背景色，并且需要将奇数行的字体颜色设置为红色。

const rows = document.querySelectorAll('table tr');

for (let i = 0; i < rows.length; i++) {
  if (i % 2 === 0) {
    rows[i].style.backgroundColor = '#f2f2f2';
  } else {
    rows[i].style.backgroundColor = '#ffffff';
  }

  if (i % 2 === 1) {
    rows[i].style.color = 'red';
  }
}

运行后，表格的奇偶行将会分别显示为不同的背景色，并且奇数行的字体颜色为红色。

以上就是“表格奇偶行设置不同颜色的核心JS代码”的完整攻略，希望能为您提供参考。