試圖斑馬條紋表中的任意行

Question

我有一個表有行標記的類。這些行應該是斑馬條紋。需要注意的是，它們並不總是連續的。

我嘗試過使用表和類名匹配，但最終結果總是不正確。發生的情況是，條帶將應用於表級別，然後僅在具有該類的行上啓用。

我需要做些什麼才能使這項工作像我打算的那樣？

腳本

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

你可能會犯這個太難了。如果你想做斑馬條紋，爲什麼不使用像:odd selector這樣的東西，並改變類。事情是這樣的......

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

然後是CSS會是這樣的......

.zebra 
{ 
    background-color: #dddddd; 
}