jquery每秒TD改變顏色

Question

我有一個動態表，它是從大到小編號從大到小的順序。我想在前2行上放置一個紅色背景，在下一行放置橙色，在後面兩行放置黃色，在下一個3放置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>