Jquery für jede Sekunde TD Farbe ändern

Question

Ich habe eine dynamische Tabelle, die in absteigender Reihenfolge von Haupt- zu Nebennummerierung ist. Und ich möchte einen roten Hintergrund auf die ersten zwei Reihen legen, orange auf die nächsten Reihen, gelb auf die nächsten zwei Reihen und grün auf die nächsten drei mit jQuery.

Tabellenstruktur:

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

Wie weit ich mit jQuery bekam:

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

     }); 
    }); 
</script> 

Kann jemand mir bitte helfen? Vielen Dank

Answer 1

Die gute Möglichkeit wäre, Stile mit CSS zu definieren. Dies ist eine Möglichkeit, wie man das erreichen könnte:

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>

Vielleicht wirklich brauchen Sie eine Javascript-Lösung für Ihr Problem. Und vielleicht ist es für einen Kunden, der die Idee oft leise ändert. So gibt es eine Million Möglichkeiten, wie Sie es lösen könnten. Eine Lösung ist: Schreiben Sie die Farben als Klassennamen in ein Javascript-Array und fügen Sie sie dann zu den Elementen hinzu, abhängig von der Reihenfolge und Menge, in der sie im Array geschrieben sind. Andere Farben, mehr Elemente? Ändern Sie einfach das 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>

Natürlich brauchen Sie nicht CSS zu verwenden, überhaupt, wenn Sie nicht wollen.

Answer 2

Verwenden Sie gt() + lt() Selektoren. Beispiel:

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