부트 스트랩의 테이블 테이블 호버 클래스를 사용하여 데이터 목록의 행을 강조 표시하는 방법

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> 

나는
행에 사용자 clics, 클래스 = "강조"가 구현되어야합니다 1.() 행 클릭 강조 happen-하려면 다음이 필요합니다.
2. 사용자가 다른 행을 클릭하면 첫 번째 행에서 강조 표시 클래스를 제거하고 class = "highlight"를 새로 선택한 행에 적용합니다. bootstraps 테이블 클래스 (class = "table table-hover")에서 첫 번째 행을 원래 색상으로 되돌립니다.

요약하면 클릭 한 행만 강조 표시해야합니다. 다른 행은 부트 스트랩의 class = "table table-hover"특성을 유지해야합니다. 아이디어?

편집 2013년 7월 23일 뿐인 : http://jsfiddle.net/wood0615/5BKt6/ - (녹아웃 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'); 
    //} 

}); 

Answer 1

주위를 재생하는 데 도움이 될 것입니다 데이터 바인딩

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

간보기에 그들은 내가 빠진 열쇠는 CSS 바인딩에서 비교되는 부울이었다. 내 게시물에 답한 사람들에게 감사드립니다.

Answer 2

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

http://jsfiddle.net/XKjGJ/

Answer 3

var vm = function() { 


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

      self.selectThing = function (row, event) { 

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

---

이것은 당신의 행 선택에 색상을 변경하게됩니다.

로직을으로 플러그인하면 하나의 행만 선택됩니다. 이제 부모 속성과 모든 행이이 부모 수준 속성에 바인딩되므로 모든 행이 선택됩니다.

이 정확한 해결책이 아니다, 그러나 이것은 내가 그것을 변경하여 마침내 일을 가지고 당신이 KO

와