添加CSS类交替每2行

问题描述：

<table> 
    <tr><td>Test</td></tr> 
    <tr><td>Test</td></tr> 
    <tr><td>Test</td></tr> 
    <tr><td>Test</td></tr> 
    <tr><td>Test</td></tr> 
    <tr><td>Test</td></tr> 
    <tr><td>Test</td></tr> 
    <tr><td>Test</td></tr> 
    <tr><td>Test</td></tr> 
    <tr><td>Test</td></tr> 
    <tr><td>Test</td></tr> 
    <tr><td>Test</td></tr> 
    <tr><td>Test</td></tr> 
    <tr><td>Test</td></tr> 
</table>

我想添加一个CSS类alt每2行之后，因此，例如我有一个序列2个白色行，2个红色行，2个白色行，2个红色行等。这可能与JQuery？

请参阅此相关的问题 - http://stackoverflow.com/questions/3068480/how-can-i-add-a-class-to- every-4th-1-element – 2012-04-02 10:17:10

see http://stackoverflow.com/questions/9794564/alternating-table-row-color-but-with-2-rows-of-data – 2012-04-02 10:17:11

答

http://jsbin.com/okahax/edit#javascript,html

var t = 0; 
$("table tr").each(function (i, n) 
{ 
    if (t < 2) 
    {$(this).css('background-color','red'); 

    } 
    else if (t < 4) 
    { 
     $(this).css('background-color','white'); 

    } 
    t++; 
    if (t==4) t=0; 
})

答

事情是这样的：

$('tr:nth-child(4n),tr:nth-child(4n-1)').addClass('alt');

它使用nth-child selector用适当的方程式。

演示：http://jsfiddle.net/cnQNx/

或者：

$('tr:nth-child(4n)').prev().andSelf().addClass('alt');

添加CSS类交替每2行

相关推荐