如何用jquery控制表格奇偶行及活动行颜色

下面是如何用jquery控制表格奇偶行及活动行颜色的攻略：

1. 准备工作

在进行下一步之前，我们需要满足以下前提条件：

• 引入jquery库： 在html代码中通过以下代码引入jquery库。

  html
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1"></script>

• 确保表格的html代码已经写好，并且已经添加好了css样式。

2. 奇偶行设置不同的样式

我们可以利用jquery中的 :even 和 :odd 伪类选择器来选择表格中的偶数行和奇数行，然后通过 addClass() 方法来为这些行添加新的类。代码示例如下：

$(document).ready(function() {
  // 选择奇数行，添加类名
  $("tr:odd").addClass("odd-row");

  // 选择偶数行，添加类名
  $("tr:even").addClass("even-row");
});

在上述代码中，我们使用了 $(document).ready() 方法来确保我们的代码在文档加载时就会执行。然后，我们使用 addClass() 方法在奇数行和偶数行分别添加了名为 odd-row 和 even-row 的类名。接下来，我们需要为这些类名编写相应的 CSS 样式。

.odd-row {
  background-color: #f2f2f2;
}

.even-row {
  background-color: #ffffff;
}

使用这个CSS样式，您将会看到奇数行和偶数行既有不同的颜色，也更易读。

3. 活动行的样式

在交互中，我们也经常会要求高亮显示活动行，可以通过jquery的 .hover() 方法来完成这个效果。代码示例如下：

$(document).ready(function() {
  $("tr").hover(
    function() {
      $(this).addClass("active-row");
    },
    function() {
      $(this).removeClass("active-row");
    } 
  );
});

在这段代码中，我们选中了每一个行（<tr> 元素），然后使用了 jquery 的 .hover() 方法来监听 mouseenter 和 mouseleave 事件。当鼠标进入行时，addClass() 将名为 active-row 的样式添加到适当的行上；当鼠标离开时，removeClass() 将其移除。接下来，我们需要为这些类名编写相应的 CSS 样式。

.active-row {
  background-color: #ccf5ff;
}

CSS 样式很简单，只为选中的行添加了背景颜色。在这个示例中，我们使用淡蓝色高亮活动行。

示例演示

以下为两个示例，可通过以下链接查看：

• 示例1：表格奇偶行效果 + 活动行样式
• 示例2：多个表格奇偶行效果 + 活动行样式