Jquery為每個第二個TD改變顏色

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（）選擇器。 例：

 $('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') 

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