javascript - 如何使用 bootstrap 的 table table-hover 类突出显示数据列表中的一行

Question

我在数据列表上使用 bootstrap 的表类(特别是 class="table table-hover")(在单页应用程序中使用淘汰赛进行数据绑定(bind))-

                    <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"应用于新选择的行。将第一行返回到 Bootstrap 表类 (class="table table-hover") 的原始颜色。

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

编辑 2013 年 7 月 23 日 fiddle :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');
    //}

});

Answer 1

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

http://jsfiddle.net/XKjGJ/