如何使用 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中文網其他相關文章！