Versuch Zebra Streifen willkürliche Zeilen in einer Tabelle

Question

Ich habe eine Tabelle mit Zeilen, die von einer Klasse markiert sind. Diese Zeilen sollten Zebrastreifen sein. Der Nachteil ist, dass sie nicht immer aufeinanderfolgen.

Ich habe versucht, durch Tabelle und Klassennamen übereinstimmen, aber das Endergebnis ist immer falsch. In diesem Fall wird das Striping auf Tabellenebene angewendet und dann nur für die Zeilen mit der Klasse aktiviert.

Was muss ich ändern, damit dies so funktioniert, wie ich es vorhabe?

Script

function FormatTable() 
{ 
    $("#TableId .arbitrarySelector:nth-child(2n+1)").addClass('anotherEquallySpecialRow') 
} 

HTML

<table id="TableId" onclick="FormatTable()"> 
    <tr class="arbitrarySelector"> 
     <td><div class="space">Should be Changed and is</div></td> 
    </tr> 
    <tr class="arbitrarySelector"> 
     <td><div class="space">Should Not be Changed and is Not</div></td> 
    </tr> 
    <tr class="arbitrarySelector"> 
     <td><div class="space">Should be Changed and is</div></td> 
    </tr> 
    <tr> 
     <td><div class="space"></div></td> 
    </tr> 
    <tr class="arbitrarySelector"> 
     <td><div class="space">Should NOT be changed but is</div></td> 
    </tr> 
    <tr> 
     <td><div class="space"></div></td> 
    </tr> 
    <tr class="arbitrarySelector"> 
     <td><div class="space">Should be Changed and is</div></td> 
    </tr> 
    <tr> 
     <td><div class="space"></div></td> 
    </tr> 
    <tr> 
     <td><div class="space"></div></td> 
    </tr> 
    <tr class="arbitrarySelector"> 
     <td><div class="space">Should Not be Changed and is Not</div></td> 
    </tr> 
    <tr class="arbitrarySelector"> 
     <td><div class="space">Should be Changed and is</div></td> 
    </tr> 
    <tr class="arbitrarySelector"> 
     <td><div class="space">Should Not be Changed and is Not</div></td> 
    </tr> 
</table> 

Answer 1

Sie könnten machen dies zu schwierig. Wenn du Zebra Striping machen willst, benutze einfach etwas wie das :odd selector und ändere die Klasse abhängig davon. So etwas wie dies ...

// Add zebra striping. 
$('.arbitrarySelector:odd').addClass('zebra'); 

Und dann würde die CSS so etwas wie ...

.zebra 
{ 
    background-color: #dddddd; 
}