javascript - jquery 每秒 TD 改变颜色

Question

我有一个动态表，它按从主要编号到次要编号的降序排列。我想用 jQuery 在前 2 行放置红色背景，在接下来的行放置橙色背景，在接下来的 2 行放置黄色背景，在接下来的 3 行放置绿色背景。

表结构:

<div class="col-md-3">
   <?php
      $cidade = Cidade2h::findBySql('SELECT * from cidade2h')->all();
    ?>

    <table class="table table-striped">
        <thead>
            <tr>
                <th>Cidade</th>
                <th>Ultimas 2H</th>
            </tr>
        </thead>
        <tbody>
            <?php   foreach($cidade as $ct => $vl){ ?>
                <tr>
                    <td><?= $vl['CIDADE']?></td>
                    <td><strong><?= $vl['CONTA']?></strong></td>
                </tr>
           <?php } ?>
       </tbody>
    </table>
</div>

我对 jQuery 的了解程度:

<script>
    $( document ).ready(function() {
        $('td:nth-child(2)').each(function() {

        });
    });
</script>

有人可以帮我吗？谢谢

Answer 1

最好的方法是使用 CSS 定义样式。这是实现该目标的一种方法:

table.table.table-striped tbody tr:nth-child(1),
table.table.table-striped tbody tr:nth-child(2) {
  background-color: orange;
}

table.table.table-striped tbody tr:nth-child(3),
table.table.table-striped tbody tr:nth-child(4) {
  background-color: yellow;
}

table.table.table-striped tbody tr:nth-child(5),
table.table.table-striped tbody tr:nth-child(6), 
table.table.table-striped tbody tr:nth-child(7) {
  background-color: green;
}

<table class="table table-striped">
  <thead>
    <tr>
      <th>Cidade</th>
      <th>Ultimas 2H</th>
    </tr>
  </thead>
  <tbody>
 <tr>
      <td>111</td>
      <td><strong>111</strong></td>
    </tr>
 <tr>
      <td>222</td>
      <td><strong>222</strong></td>
    </tr>
 <tr>
      <td>333</td>
      <td><strong>333</strong></td>
    </tr>
 <tr>
      <td>444</td>
      <td><strong>444</strong></td>
    </tr>
 <tr>
      <td>555</td>
      <td><strong>555</strong></td>
    </tr>
 <tr>
      <td>666</td>
      <td><strong>666</strong></td>
    </tr>
 <tr>
      <td>777</td>
      <td><strong>777</strong></td>
    </tr>
 <tr>
      <td>888</td>
      <td><strong>888</strong></td>
    </tr>
 <tr>
      <td>999</td>
      <td><strong>999</strong></td>
    </tr>
 <tr>
      <td>101010</td>
      <td><strong>101010</strong></td>
    </tr>
 <tr>
      <td>111111</td>
      <td><strong>111111</strong></td>
    </tr>
  </tbody>
</table>

也许您真的需要一个 JavaScript 解决方案来解决您的问题。也许它适用于经常安静地改变想法的客户。所以有一百万种方法可以解决它。一种解决方案是:将颜色作为类名写入 javascript 数组中，然后根据它们在数组中写入的顺序和数量添加到元素中。其他颜色，更多元素？只需更改数组 ...

$( document ).ready(function() {

   var myColorArray = [
       'orange', 'orange',
       'yellow', 'yellow',
       'green', 'green', 'green'
   ];

   $('table.table.table-striped tbody tr').each(function(index) {
      $(this).addClass(myColorArray[index]);
   });
});

.orange {
  background-color: orange;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
  <thead>
    <tr>
      <th>Cidade</th>
      <th>Ultimas 2H</th>
    </tr>
  </thead>
  <tbody>
 <tr>
      <td>111</td>
      <td><strong>111</strong></td>
    </tr>
 <tr>
      <td>222</td>
      <td><strong>222</strong></td>
    </tr>
 <tr>
      <td>333</td>
      <td><strong>333</strong></td>
    </tr>
 <tr>
      <td>444</td>
      <td><strong>444</strong></td>
    </tr>
 <tr>
      <td>555</td>
      <td><strong>555</strong></td>
    </tr>
 <tr>
      <td>666</td>
      <td><strong>666</strong></td>
    </tr>
 <tr>
      <td>777</td>
      <td><strong>777</strong></td>
    </tr>
 <tr>
      <td>888</td>
      <td><strong>888</strong></td>
    </tr>
 <tr>
      <td>999</td>
      <td><strong>999</strong></td>
    </tr>
 <tr>
      <td>101010</td>
      <td><strong>101010</strong></td>
    </tr>
 <tr>
      <td>111111</td>
      <td><strong>111111</strong></td>
    </tr>
  </tbody>
</table>

当然，如果你不想的话，你根本不需要使用 CSS。