Alternation classes with Knockout.JS

Question

I have the next table:

  <table class="table" id="calls_table">
        <thead>
        <tr>
            <th class="round-bg header">Val1</th>
            <th class="rep-bg header">Val2</th>
            <th class="rep-bg header">Val3</th>

        </tr>
        </thead>
        <tbody data-bind="template: {name: 'call-template', foreach: calls}">
        </tbody>

    </table> 

    <script type="text/html" id="call-template">
        <tr class="alt">
            <td><a data-bind="attr: {href: url}, text: v1" class="simp" href=""></a></td>
            <td><a data-bind="attr: {href: url}, text: v2" class="simp" href=""></a></td>
            <td data-bind="text: v3"></td>

        </tr>
    </script>

The question is how to add the alternation of classes for TR's? Like: class='alt', class='' -- please advise.

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

This question is answered here on SO at alternate row style with $index binding

I put together a working sample at jsfiddle

edited May 23 '17 at 12:04

Community

1
1

answered Sep 27 '12 at 11:06

photo_tom

7,292
14
68
116

score 1 · Answer 2 · answered Sep 27 '12 at 11:10

1

You can also the jQuery :odd or :even selectors.

$(".table tr:even").addClass('alt');

This doesn't use knockout to solve the answer, I know, but sometimes simple is good.

answered Sep 27 '12 at 11:10

Andrew Grothe

2,562
1
32
48

When building tables with KO, this works the first time the table is rendered. But if you do anything that causes the table to be re-rendered (e.g., change any value), you have to make sure that you call this again. – photo_tom Sep 27 '12 at 11:21
photo_tom, yes, that's true as well. Thanks for catching that. – Andrew Grothe Sep 27 '12 at 11:29

Alternation classes with Knockout.JS

2 Answers2