如何使用 CSS 和 JavaScript 在 HTML 表格中建立斑馬條紋？

如何使用CSS 和JavaScript 應用替代表格行顏色

在HTML 中，您可以使用類別來應用替代行顏色，如你已經證明了。但是，您希望將樣式套用至表格容器本身，而不是每個單獨的行。 CSS 選擇器提供了一種實現此目的的方法。

要讓表格行具有斑馬條紋，可以使用 :nth-child(odd) 偽類。此選擇器針對表格主體 (

) 內的每個奇數行。然後，您可以對這些奇數行套用樣式，例如不同的背景顏色和文字顏色。

使用 jQuery

如果您喜歡使用 JavaScript，您可以使用jQuery 函式庫。使用 jQuery，您可以選擇表格中的所有奇數行，並使用 css() 函數套用所需的樣式。

範例HTML:

<table border="1">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>13</td>
    </tr>
  </tbody>
</table>

CSS:

tbody td {
  padding: 30px;
}

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

jQuery:

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

使用這些方法，您可以使用CSS 輕鬆建立替代表格行顏色，確保您的表格具有視覺吸引力資料。

以上是如何使用 CSS 和 JavaScript 在 HTML 表格中建立斑馬條紋？的詳細內容。更多資訊請關注PHP中文網其他相關文章！