Question

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

表格结构：

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

Answer 2

使用gt（）+ lt（）选择器。例如：

＆＃13;

$('table tr:lt(2)').css('background-color', 'red')
$('table tr:gt(1):lt(2)').css('background-color', 'green')
$('table tr:gt(3):lt(2)').css('background-color', 'blue')

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>aaaa</td>
    <td>bbbb</td>
  </tr>
  <tr>
    <td>aaaa</td>
    <td>bbbb</td>
  </tr>
  <tr>
    <td>aaaa</td>
    <td>bbbb</td>
  </tr>
  <tr>
    <td>aaaa</td>
    <td>bbbb</td>
  </tr>
  <tr>
    <td>aaaa</td>
    <td>bbbb</td>
  </tr>
  <tr>
    <td>aaaa</td>
    <td>bbbb</td>
  </tr>
</table>

＆＃13;

Jquery为每个第二个TD改变颜色

2 个答案: