jquery - Knockout JS 表高亮

Question

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

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

谢谢

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 表
3.我可以使用 - CSS3 选择器

---

或者，您可以避免使用 jQuery，而只使用 Knockout中的css 绑定。

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');