CSS 动态交替颜色行 table

Question

我正在使用 Dreamweaver，我想交替为动态 table 的行着色。我似乎找不到任何适合我或我理解的答案。您能否提供一个示例 CSS 如何做到这一点？解释会有所帮助，因为我对编码还没有信心。

我正在使用 Chrome 浏览器。

Answer 1

我更新了它以通过显示实际的 HTML 页面来提供更好的示例。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("tr:even").css("background-color", "#eeeeee");
      $("tr:odd").css("background-color", "#ffffff");
    })
  </script>
</head>

<body>
  <table>
    <tr>
      <td>Col 1</td>
      <td>Col 2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Cat</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Dog</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Mouse</td>
    </tr>
  </table>
</body>

</html>

Answer 2

尝试将此添加到您的 css，它应该适用于所有现代浏览器：

tr:nth-child(odd) {
    background-color:#eee;
}
tr:nth-child(even) {
    background-color:#fff;
}

Answer 3

使用nth-child http://jsfiddle.net/37bv1s14/

<table>
<tr>
    <td>aa</td>
    <td>sadfdf</td>
</tr>
 <tr>
    <td>aa</td>
    <td>sadfdf</td>
</tr>
 <tr>
    <td>aa</td>
    <td>sadfdf</td>
</tr>
 <tr>
    <td>aa</td>
    <td>sadfdf</td>
</tr>

CSS

table{
border:1px solid;
}

tr:nth-child(even){
background-color:green;
}
tr:nth-child(odd){
background-color:yellow;
}

Answer 4

如果我使用 PHP 生成 table，我会使用两个（或更多）CSS class 应用于 [=46] 的标签=] 我要格式化。

#my_table tr.r0 td { background-color: #123; }

#my_table tr.r1 td { background-color: #456; }

换句话说，上面的两个CSS语句的意思是：将<tr>和classr0/r1中任何<td>的背景颜色设置为# 123/#456，仅在 table 中，id #my_table.

当您生成 table 的行时，您可以设置一个始终每行加 1 的计数器（如果您的行生成有可能阻止某些行出现或生成变量的奇怪条件，则很有用行数），我使用计数器的模 2 (% 2) 来确定该行是偶数还是奇数。偶数行产生 0，奇数行产生 1。

echo '<tr class="r' . ($counter % 2) . '">';

这样您就可以为行设置任意数量的颜色类型。

或者，如果您只有 2 种行颜色，您可以使用最初设置为 0 的变量，并在每次生成行时在 0 和 1 之间切换，如下所示：

$counter = !$counter;

或使用 C 风格的 if-then-else 结构（可读性较差）：

$counter = $counter ? 0 : 1;

CSS 动态交替颜色行 table

CSS Alternate color rows in dynamic table

css

dynamic

colors

css-tables