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');

    //}



});