如何在 JavaScript/jQuery 中更改行的背景

在 web 开发中，经常需要更改页面元素的样式来达到特定的视觉效果。本篇文章将为你介绍如何使用 JavaScript/jQuery 更改表格行的背景颜色。

HTML 结构

假设有以下 HTML 结构：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
    </tr>
  </tbody>
</table>

JavaScript 实现

纯 JavaScript 实现

使用纯 JavaScript 的方式更改背景颜色可以通过以下步骤完成：

1. 获取表格中所有的行元素；
2. 遍历每一行元素，为其设置背景颜色。

const tableRows = document.querySelectorAll('tr'); // 获取所有行元素
tableRows.forEach((row, index) => {
  if (index % 2 === 0) { // 判断索引值是否为偶数
    row.style.backgroundColor = 'gray'; // 设置背景颜色
  }
});

jQuery 实现

使用 jQuery 的方式更改背景颜色可以通过以下步骤完成：

1. 获取表格中所有的行元素；
2. 遍历每一行元素，为其设置背景颜色。

$('tr').each((index, row) => {
  if (index % 2 === 0) { // 判断索引值是否为偶数
    $(row).css('background-color', 'gray'); // 设置背景颜色
  }
});

总结

使用 JavaScript/jQuery 更改行的背景颜色是一项非常基本的操作，但也是开发中经常使用的操作之一。通过本篇文章的介绍，相信你已经掌握了如何使用 JavaScript/jQuery 更改表格行的背景颜色的方法。