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

Question

I am using bootstrap's table class (in particular class="table table-hover") on a list of data (using knockout for databinding in a 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 the following to happen-
1. When a user clics on a row, class="highlight" should be implemented (highlights the clicked on row).
2. When a user clicks on a different row, remove the highlight class on the first row and apply the class="highlight" to the newly selected row. Return the first row to the original colors from bootstraps table class (class="table table-hover").

In short, only the row clicked on should be highlighted. The other rows should retain the 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 get local data, if we have it
        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');
    //}

});

Solution 1

I got it to work finally by changing the data-binding on the view to-

 <tr id="AllCertRow" style="cursor: pointer" data-bind="click: $parent.selectThing, css: { highlight: $parent.isSelected() == $data.lwCertID }">

They key I was missing was the boolean compare in the css binding. Thanks to those who replied to my post.

Solution 2

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

http://jsfiddle.net/XKjGJ/