javascript - How to highlight a row in a list of data with bootstrap's table table-hover class -

i using bootstrap's table class (in particular class="table table-hover") on list of data (using knockout databinding in single page application)-

                    <table id="tblallcert" border="0" class="table table-hover" width="100%">                         <tbody  data-bind="foreach: allcertificates">                         <tr id="allcertrow" style="cursor: pointer" data-bind="a: console.log($data), click: $parent.selectthing, css: { 'highlight': $parent.isselected() == $data }  ">                             <td>                                  <b><span data-bind="    text: clientname"></span>&nbsp;(<span data-bind="    text: clientnumber"></span>)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span data-bind="    text: borrowbasecount"></span>&nbsp;loan(s)&nbsp;</b>                                 collateral analyst:&nbsp;<span data-bind="    text: username"></span>                                  certificate:&nbsp;<span data-bind="text: lwcertid"></span>&nbsp;&nbsp;request&nbsp;date:&nbsp;<span data-bind="    text: moment(requestdate).format('dd/mmm/yyyy')"></span>                             </td>                              <td data-bind="text: $parent.isselected"></td>                         </tr>                         </tbody>                     </table> 

i need following happen-
1. when user clics on row, class="highlight" should implemented (highlights clicked on row).
2. when user clicks on different row, remove highlight class on first row , apply class="highlight" newly selected row. return first row original colors bootstraps table class (class="table table-hover").

in short, row clicked on should highlighted. other rows should retain characteristics of bootstrap's class="table table-hover". ideas?

edit 7/23/2013 fiddle: http://jsfiddle.net/wood0615/5bkt6/ - ( knockout code )-

 define(['services/logger', 'durandal/system', 'durandal/plugins/router', 'services/certificatedataservice'], function (logger, system, router, certificatedataservice) {     var allcertificates = ko.observablearray([]);     var mycertificates = ko.observablearray([]);     //var serverselectedoptionid = ko.observablearray();     var isselected = ko.observable();     var serverselectedoptionid = ko.observable();     var currentdisplaything = ko.observable(allcertificates);   var serveroptions = [     { id: 1, name: 'certificate', optiontext: 'lwcertid' },     { id: 2, name: 'client name', optiontext: 'clientname' },     { id: 3, name: 'client number', optiontext: 'clientnumber' },     { id: 4, name: 'request date', optiontext: 'requestdate' },     { id: 5, name: 'collateral analyst', optiontext: 'username' }     ];      var activate = function () {           // go local data, if have         return selectallcerts(), selectmycerts();      };       var vm = {         activate: activate,         allcertificates: allcertificates,         mycertificates: mycertificates,         title: 'certificate approvals',         selectmycerts: selectmycerts,         selectallcerts: selectallcerts,         theoptionid: ko.observable(1),         serveroptions: serveroptions,         serverselectedoptionid: serverselectedoptionid,         sortupdownallcerts: sortupdownallcerts,         isselected: ko.observable(),           selectthing: function(row, event) {              isselected(row.lwcertid);              }      };       serverselectedoptionid.subscribe(function () {         var sortcriteriaid = serverselectedoptionid();         allcertificates.sort(function (a, b) {             var fieldname = serveroptions[sortcriteriaid - 1].optiontext;              if (a[fieldname] == b[fieldname]) {                 return a[fieldname] > b[fieldname] ? 1 : a[fieldname] < b[fieldname] ? -1 : 0;             }              return a[fieldname] > b[fieldname] ? 1 : -1;          });      });      allcertificates.valuehasmutated();     return vm;      ////////////                          function sortupdownallcerts() {         allcertificates.sort();         allcertificates.valuehasmutated();     }      function sortupdownmycerts() {         return allcertificates.sort()     }       function selectallcerts() {         return certificatedataservice.getallcertificates(allcertificates);     }      function selectmycerts() {         return certificatedataservice.getmycertificates(mycertificates);     }      //function rowselected() {     //    $('#tblallcert tr').on('click', function (event) {     //        $(this).addclass('highlight').siblings().removeclass('highlight');     //    });     //    $("#tblallcert tr").addclass("highlight");     //    $('#tblallcert tr').css('background-color: red');     //}  }); 

$('table').on('click','tr',function(e){   $('table').find('tr.highlight').removeclass('highlight');   $(this).addclass('highlight'); }) 

http://jsfiddle.net/xkjgj/