JQuery for every second color change TD

Question

I have a dynamic table, which is in descending order from primary to minor numbering. And I want to put a red background on the first 2 lines, orange on the next lines, yellow on the next 2 lines and green on the 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 jQuery:

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

        });
    });
</script>

Can anybody help me? Thanks you

Answer 1

A good way would be to define styles with CSS. This is one way to achieve this:

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>

Run codeHide result

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

Hide result

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

Hide result