JSFiddle - React, Tailwind, and code Playground

by Leonardo Trimarchi

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<table class="table table-bordered">
    <tbody data-bind="foreach: frameworks">
        <tr data-bind="css: {'selected':$root.selectedItem() == $data}">
            <td>
                <button class=btn data-bind="click: $parent.doStuff">A</button>
            </td>
            <td data-bind="text: $data"></td>
        </tr>
    </tbody>
</table>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');

.selected
{
    background-color:red;
}

JavaScript

var App = new function () {
        var self = this;
        self.frameworks = ko.observableArray();
        self.selectedItem = ko.observable(null);
        self.doStuff = function (item) {
            self.selectedItem(item);
            //how to change table row color?
        };
    };

App.frameworks.push('bootstrap');
App.frameworks.push('knockout.js');
ko.applyBindings(App);