Knockout JS table hilight - jquery, knockout.js, jeweils

Ich versuche, mit jQuery abwechselnde Farben in eine Tabelle einzufügen. Das Problem ist, dass ich Knockout verwende, und wenn jeder der Stil auf alle tr angewendet wird. http://jsfiddle.net/PUc3J/2/

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

Danke

Antworten:

5 für die Antwort № 1

Du könntest es einfach benutzen CSS allein Um die alternative Tabellenzeilenfarbe zu erreichen, müssen Sie nicht die Unterstützung von Internet Explorer 8 oder niedriger unterstützen.

http://jsfiddle.net/GJw7R/

.tk-table tbody tr:nth-child(odd) {
background-color: #eaeded;
}

Verweise:
1. http://davidwalsh.name/css-tables-css3-alternate-row-colors
2. Twitter Bootstrap-Tabellen
3. Kann ich CSS3-Selektoren verwenden?

---

Alternativ können Sie es vermeiden, auf jQuery zurückzugreifen, und verwenden Sie einfach die CSS-Bindung im Schlagen.

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>

...oder...

http://jsfiddle.net/ZDDrT/

<tr data-bind="css: {"hilight": $index() % 2 === 0}">

---

2 für die Antwort № 2

Siehe aktualisierte Geige, ich habe Ihren HTML-Code korrigiert: http://jsfiddle.net/tkirda/PUc3J/3/

Es gibt auch einen einfacheren Weg, alternative Zeilen zu finden:

$(".tk-table tr:odd").addClass("hilight");

---