如何使用bootstrap'突出显示数据列表中的一行;s表的悬停类

我在数据列表上使用bootstrap的表类（特别是class="table table hover"）（在单页应用程序中使用敲除进行数据绑定）-

                    <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>

我需要以下操作-
1.当用户点击一行时，应实现class="highlight"（高亮显示点击的行）
2.当用户单击另一行时，删除第一行上的高亮显示类，并将class="highlight"应用于新选择的行。将第一行返回到bootstraps table class（class="table table hover"）中的原始颜色。

简而言之，只应突出显示单击的行。其他行应该保留bootstrap的class="table table hover"的特性。想法？

编辑7/23/2013小提琴：http://jsfiddle.net/wood0615/5BKt6/-（淘汰码）-

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