突出显示组中的表格行背景颜色

Question

我有一个表格是从一个ASP.NET gridview控件动态渲染的，它有21行，我希望背景颜色以3个为一组进行交替。我希望1-3行的背景颜色为白色，4-6灰色背景颜色，7-9白色，10-12，灰色，13-15白色等。

Answer 1

您可以在CSS中创建两个类，并手动或动态地将它们应用于表中的每一行。希望这可以帮助。请参阅代码段以获取示例：

＆＃13;

＆＃13;

.row-a {
  background-color: white;
}

.row-b {
  background-color: gray;
}

＆＃13;

<table>
  <thead>
    <tr>
      <th>Col 1</th>
    </tr>
  </thead>
  <tbody>
    <tr class='row-a'>
      <td>Row 1</td>
    </tr>
    <tr class='row-a'>
      <td>Row 2</td>
    </tr>
    <tr class='row-a'>
      <td>Row 3</td>
    </tr>
    <tr class='row-b'>
      <td>Row 4</td>
    </tr>
    <tr class='row-b'>
      <td>Row 5</td>
    </tr>
    <tr class='row-b'>
      <td>Row 6</td>
    </tr>
    <tr class='row-a'>
      <td>Row 7</td>
    </tr>
    <tr class='row-a'>
      <td>Row 8</td>
    </tr>
    <tr class='row-a'>
      <td>Row 9</td>
    </tr>
    <tr class='row-b'>
      <td>Row 10</td>
    </tr>
    <tr class='row-b'>
      <td>Row 11</td>
    </tr>
    <tr class='row-b'>
      <td>Row 12</td>
    </tr>
    <tr class='row-a'>
      <td>Row 13</td>
    </tr>
    <tr class='row-a'>
      <td>Row 14</td>
    </tr>
    <tr class='row-a'>
      <td>Row 15</td>
    </tr>
    <tr class='row-b'>
      <td>Row 16</td>
    </tr>
    <tr class='row-b'>
      <td>Row 17</td>
    </tr>
    <tr class='row-b'>
      <td>Row 18</td>
    </tr>
    <tr class='row-a'>
      <td>Row 19</td>
    </tr>
    <tr class='row-a'>
      <td>Row 20</td>
    </tr>
    <tr class='row-a'>
      <td>Row 21</td>
    </tr>
  </tbody>

</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果你正在寻找jquery方式，你可以实现如下：

counter = 1; // intialize counter
$('#table tbody tr').filter(function() {
  counter <= 3 ? $(this).addClass('white-tr') : $(this).addClass('grey-tr') 
  counter = counter == 6 ? 1 : counter+1; // once the counter reaches 6 set back to 1
});

body{
  background: #000;
 }
.white-tr{
 background: white;
 }
 .grey-tr{
  background: grey;
  color: white;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <thead>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
    </tr>
    <tr>
      <td>Row 4</td>
    </tr>
    <tr>
      <td>Row 5</td>
    </tr>
    <tr>
      <td>Row 6</td>
    </tr>
    <tr>
      <td>Row 7</td>
    </tr>
    <tr>
      <td>Row 8</td>
    </tr>
    <tr>
      <td>Row 9</td>
    </tr>
    <tr>
      <td>Row 10</td>
    </tr>
    <tr>
      <td>Row 11</td>
    </tr>
    <tr>
      <td>Row 12</td>
    </tr>
    <tr>
      <td>Row 13</td>
    </tr>
    <tr>
      <td>Row 14</td>
    </tr>
    <tr>
      <td>Row 15</td>
    </tr>
    <tr>
      <td>Row 16</td>
    </tr>
    <tr>
      <td>Row 17</td>
    </tr>
    <tr>
      <td>Row 18</td>
    </tr>
    <tr>
      <td>Row 19</td>
    </tr>
    <tr>
      <td>Row 20</td>
    </tr>
    <tr>
      <td>Row 21</td>
    </tr>
  </tbody>
</table>