Knockout JS表hilight

Question

我正在尝试使用jQuery在表中添加交替颜色。问题是我正在使用Knockout，并且当每个样式都应用于所有tr时。我的问题在这里：http://jsfiddle.net/PUc3J/2/

$(function(){
    $(".tk-table tbody tr")
        .each(function(i){
            if(i % 2 == 0){
                $(this).addClass('hilight');
            }
        })
});

THX

Answer 1

只要您不关心支持Internet Explorer 8或更低版本，就可以使用单独使用CSS 来完成备用表行颜色。

http://jsfiddle.net/GJw7R/

.tk-table tbody tr:nth-child(odd) {
    background-color: #eaeded;
}

的引用：
 1. http://davidwalsh.name/css-tables-css3-alternate-row-colors
 2. Twitter Bootstrap tables
 3. Can I use - CSS3 selectors

---

或者，您可以避免使用jQuery并只使用 淘汰赛中的 css binding 。

http://jsfiddle.net/9UDkg/

<tbody data-bind="foreach: data">
    <tr data-bind="css: $index() % 2 === 0 ? 'hilight' : ''">
        <td><p data-bind="text: online"></p></td>
        <td><p data-bind="text: name"></p></td>
        <td><p data-bind="text: email"></p></td>
    </tr>
</tbody>

...或...

http://jsfiddle.net/ZDDrT/

<tr data-bind="css: {'hilight': $index() % 2 === 0}">

Answer 2

查看更新的小提琴，我修复了您的HTML：http://jsfiddle.net/tkirda/PUc3J/3/

此外，还有更简单的方法来查找备用行：

$(".tk-table tr:odd").addClass('hilight');