jQuery隔行换色

封面图 • 2025-12-02 • jQuery

在 jQuery 中实现“隔行换色”（即给表格中的奇数行和偶数行设置不同的背景颜色），可以通过 `:odd` 和 `:even` 选择器来实现。下面是一个简单的示例，展示如何使用 jQuery 实现隔行换色。

---

### 示例：HTML + jQuery 实现隔行换色

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery 隔行换色示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    table {
      border-collapse: collapse;
      width: 50%;
    }
    th, td {
      padding: 10px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>

// 奇數行設為白色
    $('#myTable tr:odd').css('background-color', '#ffffff');
  });
</script>

</body>
</html>
```

---

### 说明：

- `tr:even`：选择所有**偶数索引**的 `<tr>` 行（从 0 开始计数，即第 0、2、4... 行）。
- `tr:odd`：选择所有**奇数索引**的 `<tr>` 行（第 1、3、5... 行）。
- `.css()` 方法用于设置样式。

---

### 如果你想要动态添加行并保持隔行换色，可以考虑使用事件监听或者在添加行后重新应用样式。

如果你有其他需求，比如只对某个特定表格生效、使用 CSS 类来控制颜色等，也可以告诉我，我可以进一步优化代码。