JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<table>
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr data-bind='css: { selected: isSelected }, click: function() { $data.isSelected(!$data.isSelected()); }'>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
<div id="row1">Row 1</div>
<div id="row2">Row 2</div>
<div id="row3">Row 3</div>
CSS
.selected {
background-color: yellow;
}
JavaScript
ko.applyBindings({
people: [
{ firstName: 'Bert', lastName: 'Bertington', isSelected: ko.observable(false) },
{ firstName: 'Charles', lastName: 'Charlesforth', isSelected: ko.observable(false) },
{ firstName: 'Denise', lastName: 'Dentiste', isSelected: ko.observable(false) }
]
});
$('#row1, #row2, #row3').click(function() {
console.log($(this).attr('id') + ' clicked');
$(this).css('background-color','yellow');
});