format row background after data has loaded from cloudkit js

Question

I'm trying to format my table rows with odd & even background colouring after the rows have loaded from knockout.js/cloudkit.js. Every time it loads, I either get all grey rows or all white rows.

$(function() {
            $("tr.list:odd").css("background-color", "#FFFFFF");
            $("tr.list:even").css("background-color", "#EEEEEE");
        });

<table>
<!-- While Loop - List of Gift Vouchers -->
<tbody data-bind="foreach: items">
    <tr class="list">
        <td class="listitem" style="width: 40px; text-align: center"><span class="butty">+</span></td>
        <td class="listitem"><!--ko text: fields.id.value--><!--/ko--> - <!--ko text: fields.giftto.value--><!--/ko--></td>
        <td class="listitem"><!-- If: Is Valid & not expired -->
            <span id="validity"></span>
        </td>
    </tr>
    <tr class="detailrow">
        <td colspan="3">
        <div style="padding:10px; line-height: 18px;">
            <!--Tour - <span style="font-weight: bold;" data-bind="text: fields.type_name.value"></span>--> (<span data-bind="text: fields.numpax.value"></span> pax)<br>
            To - <span data-bind="text: fields.giftto.value"></span><br>
            From - <span data-bind="text: fields.giftfrom.value"></span><br>
            Message - <span data-bind="text: fields.message.value"></span><br>
        Purchased by - <!-- Payee - Purchased by --><br>
            Amount - <span data-bind="text: fields.amount.value"></span><br>
        Payment Type - <!-- Transact - Transaction Name --><br>
            Expiry - <span data-bind="text: fields.expire.value"></span><br>
        Entered by - <!-- Entered by & Date - CK --><br>
            Notes - <span data-bind="text: fields.notes.value"></span><br>
        <!-- Date Used -->
        </div>
    <!--<form method="post" action="act-used.php" name="markRead">-->
        <a href="pdf.php?gcert=" onclick="location.href=this.href+'pdf.php?gcert='+fields.id.value;return false;"><div class="cellblocks view">View</div></a><a href="edit.php?gcert=" onclick="location.href=this.href+'edit.php?gcert='+fields.id.value;return false;"><div class="cellblocks edit">Edit</div></a><a href="#"><div class="cellblocks read">Mark Used</div></a>
        </form>
        </td>
    </tr>
    </tbody>
    </table>

Answer 1

could you use the foreach index property along with the style binding?

<tbody data-bind="foreach: items">
    <tr data-bind="style: { 'background-color': ($index() === 0 || !!($index() && !($index()%2))) ? '#FFFFFF' : '#EEEEEE' }">

function item(key, value) {
  this.key = ko.observable(key);
  this.value = ko.observable(value);
}

function model() {
  var self = this;
  this.items = ko.observableArray('');
}

var mymodel = new model();

$(document).ready(function() {
  ko.applyBindings(mymodel);
  mymodel.items.push(new item(1, 'ONE'));
  mymodel.items.push(new item(2, 'TWO'));
  mymodel.items.push(new item(3, 'THREE'));
  mymodel.items.push(new item(4, 'FOUR'));
  mymodel.items.push(new item(5, 'FIVE'));
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed">
  <thead>
    <tr>
      <th>ID</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: items">
    <tr data-bind="style: { 'background-color': ($index() === 0 || !!($index() && !($index()%2))) ? '#FFFFFF' : '#EEEEEE' }">
      <th data-bind="text: key"></th>
      <th data-bind="text: value"></th>
    </tr>
  </tbody>
</table>