데이터가 cloudkit js에서로드 된 후 형식 행 배경

Question

knockout.js/cloudkit.js에서 행이로드 된 후 홀수가 & 인 테이블 행을 백그라운드 색으로 채우려고합니다. 로드 될 때마다 회색 행이나 흰색 행이 모두 표시됩니다.

$(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

스타일 바인딩과 함께 foreach 인덱스 속성을 사용할 수 있습니까?

<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>