如何使用 CSS 和 jQuery 在 HTML 表格中创建交替行颜色？-css教程-PHP中文网

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

Barbara Streisand

发布： 2024-12-27 08:59:14

原创

747 人浏览过

How Can I Use CSS and jQuery to Create Alternating Row Colors in HTML Tables?

使用 CSS 创建备用表格行颜色

备用表格行颜色增强了 HTML 表格的视觉吸引力和可用性，使它们更易于使用读。以下是使用 CSS 实现此目的的方法：

使用表格类：

您可以为表格分配一个类并将样式应用于该类中的表格行：

.alternate_color tr:nth-child(odd) {
  background-color: #CCCCCC;
}

登录后复制

这将交替奇数的背景颜色rows.

使用 jQuery：

使用 jQuery，您可以选择奇数行并为其设置样式动态：

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

登录后复制

nth-child:

直接在 CSS 样式表中，您可以使用 nth-child 选择器来定位每个other row:

tbody tr:nth-child(odd) {
  background-color: #CCCCCC;
}

登录后复制

这确保只有奇数行才会有备用背景

示例 HTML：

这是使用上述方法的 HTML 示例：

<table class="alternate_color">
  <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，您可以轻松地在表格中创建斑马条纹，提高其可读性和美观性。

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