JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<table id="tk-table69" class="tk-table" style="width: 300px;">
<thead><tr><th>Online</th><th>Nome</th><th>Email</th></tr></thead>
<tbody data-bind="foreach: data">
<tr>
<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>
</table>
<div id='x'></div>
CSS
.tk-table{
width: 100%;
margin: 4px;
border: 1px solid #aeaeae;
}.tk-table thead tr{
height: 15px;
font-size: 11px;
text-align: left;
color: #40464b;
}.tk-table thead tr th{
padding-left: 3px;
border-left: 1px solid #aeaeae;
border-bottom: 1px solid #aeaeae;
}.tk-table tbody tr{
border-bottom: 1px solid #e6e6e6;
padding: 3px 0 3px 3px;
vertical-align: middle;
}.tk-table tbody tr td{
border-left: 1px solid #e6e6e6;
padding: 3px 0 3px 3px;
vertical-align: middle;
font-size: 12px;
}.tk-table tbody tr td p{
margin: 0;
}.tk-table tbody tr:hover{
background: #b8d6ff;
}
.hilight{
background: #eaeded;
}
JavaScript
var ClientModel = function(){
var self = this;
self.data = ko.observableArray([
{name: 'Razer', email: 'razeraj.com', site: 'razer.com', online: 1},
{name: 'Bitfenix', email: 'bitfenix@gmail.com', site: 'bitfenix.com', online: 0},
{name: 'Thermaltake', email: 'thermal@gmail.com', site: 'thermaltake.com', online: 1},
{name: 'Lian-li', email: 'lianli@gmail.com', site: 'lianli.com', online: 0}
]);
};
ko.applyBindings(new ClientModel());
$(function(){
$(".tk-table").find("tbody tr")
.each(function(i){
if(i % 2 == 0){
$("#x").append(i);
$(this).addClass('hilight');
}
})
});