0

jQueryを使用してテーブルに交互の色を追加しようとしています。問題は、私がノックアウトを使用していて、それぞれのスタイルがすべての tr に適用されることです。私の問題はここにあります: http://jsfiddle.net/PUc3J/2/

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

どうも

4

2 に答える 2

5

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}">
于 2013-05-27T19:58:50.180 に答える
2

更新されたフィドルを参照してください。HTML を修正しました: http://jsfiddle.net/tkirda/PUc3J/3/

また、別の行を見つける簡単な方法があります。

$(".tk-table tr:odd").addClass('hilight');
于 2013-05-27T19:40:20.130 に答える