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

Question

我在数据列表上使用引导程序的表类（特别是 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" 应用于新选择的行。从引导表类 (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/

Answer 2

我最终通过将视图上的数据绑定更改为-

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

我缺少的关键是 css 绑定中的布尔比较。感谢那些回复我帖子的人。

Answer 3

var vm = function() {


            var self=this;
            self.isSelected = ko.observable(false);

            self.selectThing = function (row, event) {

                self.isSelected(true);
            }.bind(this);

---

这将使您的行在选择时改变颜色。

插入你的逻辑，以便只选择一行。现在这会选择所有行，因为它是一个父属性，并且所有行都绑定到这个父级属性。

这不是一个精确的解决方案，但这将帮助您玩 KO