jquery - How to change table row background color from KO's binding method? -

i'm using ko.js bind table body many rows. first column has buttons, if user clicks on button of row, want row highlighted. don't know how reference table row ko's binding method.

here's fiddle i'm talking about.

and code:

<table class="table table-bordered">     <tbody data-bind="foreach: frameworks">         <td>             <button class=btn data-bind="click: $parent.dostuff">a</button>         </td>         <td data-bind="text: $data"></td>     </tbody> </table>   var app = new function () {         var self = this;         self.frameworks = ko.observablearray();         self.dostuff = function () {             //how change table row color?         };     };  app.frameworks.push('bootstrap'); app.frameworks.push('knockout.js'); ko.applybindings(app); 

you close. have updated fiddle here solution.

html

<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: $root.dostuff">a</button>             </td>             <td data-bind="text: $data"></td>         </tr>     </tbody> </table> 

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);             //do other things here button click         };     };      app.frameworks.push('bootstrap');     app.frameworks.push('knockout.js');     ko.applybindings(app);