Jquery for each second TD change color

Question

I have a dynamic table which is in descending order from major to minor numbering. And I want to put a red background on first 2 rows, orange on next rows, yellow on next 2 rows and green on next 3 with jQuery.

Table Structure :

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

How far I got with jQuery :

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

        });
    });
</script>

Can anyone help me please ? Thank you

Answer 1

The good way would be to define styles with CSS. This is one way of how you could achieve that:

 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> 

Maybe you really do need a javascript solution for your problem. And maybe it's for a client which changes the idea quiet often. So there are a million ways on how you could solve it. One solution is: Write the colors as class names in a javascript array and then add to the elements depending on the order and quantity they are written in the array. Other colors, more elements? Just change the array ...

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

Of course you don't need to use CSS at all if you don't want to.

Answer 2

Use gt() + lt() selectors. Example:

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