2012-04-02 3 views
4

ich eine Tabelle, wie so haben:eine CSS-Klasse abwechselnd hinzufügen alle 2 Reihen

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

möchte ich alt nach jeweils zwei Reihen eine CSS-Klasse hinzuzufügen, so zum Beispiel ich eine Folge von haben werden 2 weiße Reihen, 2 rote Reihen, 2 weiße Reihen, 2 rote Reihen und so weiter. Ist das mit JQuery möglich?

+0

diese Frage im Zusammenhang See - http://stackoverflow.com/questions/3068480/how-can-i-add-a-class-to- Every-4th-1-element –

+0

siehe http://stackoverflow.com/questions/9794564/alternating-table-row-color-but-with-2-rows-of-data –

Antwort

4

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; 
}) 
2

Etwas wie folgt aus:

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

Das die nth-child selector mit einer entsprechenden Gleichung verwendet.

Demo: http://jsfiddle.net/cnQNx/

Oder:

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