如何使用 CSS 和 JavaScript 在 HTML 表格中创建交替行颜色？

使用 CSS 实现交替表行着色

在 HTML 表格中，为行分配交替颜色可以增强视觉吸引力，使数据更具可读性。这可以使用应用于各个 tr 元素的 CSS 类或通过设置表格元素本身的样式来实现。

使用 CSS 类

提供的 HTML 和 CSS 利用 CSS 类（tr.d0 和 tr） .d1) 为行着色。但是，要根据行在表中的位置对行进行着色，我们可以利用 tbody 元素中的 :nth-child 选择器。例如：

tbody tr:nth-child(2n+1) {
  background-color: #CC9999;
  color: black;
}
tbody tr:nth-child(2n) {
  background-color: #9999CC;
  color: black;
}

使用表格样式

或者，我们可以使用 table 元素设置整个表格的样式。要使所有奇数行具有特定颜色，我们可以使用以下 CSS：

table tr:nth-child(odd) {
  background-color: #4C8BF5;
  color: #fff;
}

使用 JavaScript (jQuery)

另一种方法涉及使用 JavaScript (jQuery)：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(document).ready(function() {
  $("tr:odd").css({
    "background-color": "#000",
    "color": "#fff"
  });
});

以上是如何使用 CSS 和 JavaScript 在 HTML 表格中创建交替行颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！