Question

我正在使用Dreamweaver，我想交替地为动态表的行着色。我似乎无法找到适合我或我理解的任何答案。你能给出一个关于如何做的示例CSS吗？解释会有所帮助，因为我对编码没有信心。

我正在使用Chrome浏览器。

Answer 1

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

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

Answer 2

我们e 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 3

如果我使用PHP生成一个表，我会使用两个（或更多）CSS类，这些类应用于我想要格式化的表的标记。

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

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

换句话说，上面的两个CSS语句意味着：设置<td>中任何<tr>的背景颜色，类别为r0 / r1到＃123 /＃456，仅在id为#my_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;

Answer 4

我更新了这个，通过显示实际的HTML页面提供了一个更好的示例。

＆＃13;

<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>

＆＃13;

CSS动态表中的备用颜色行

4 个答案: