如何切換Twitter Bootstrap的表格行背景顏色？

Question

在參考我以前的post：

我的HTML

<table class="table table-bordered table-condensed table-striped"> 
    <thead> 
     <tr> 
      <th>Col 1</th> 
      <th>Col 2</th> 
      <th>Col 3</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><strong>Data 1</strong></td> 
      <td>Data 2</td> 
      <td>Data 3</td> 
     </tr> 
     <tr> 
      <td><strong>Data 1</strong></td> 
      <td>Data 2</td> 
      <td>Data 3</td> 
     </tr> 
     <tr> 
      <td><strong>Data 1</strong></td> 
      <td>Data 2</td> 
      <td>Data 3</td> 
     </tr> 
    </tbody> 
</table> 

jQuery的

$(document).ready(function(){ 
    $('table.table-striped tr').on('click', function() { 
     $(this).find('td').css('background-color', '#ff0000'); 

     // toggleClass doesn't seem to work 

    }); 
}); 

我想通過我的點擊事件來切換排色對開的上。任何想法，如果這是可能的使用用戶定義的CSS選擇器？

Answer 1

你可以試試這個

CSS

.bg{background-color:#ff0000 !important;}​ 

JS

$(document).ready(function(){ 
    $('table.table-striped tbody tr').on('click', function() { 
     $(this).closest('table').find('td').removeClass('bg'); 
     $(this).find('td').addClass('bg'); 
    }); 
});​ 

DEMO。

更新：用於切換

$(document).ready(function(){ 
    $('table.table-striped tbody tr').on('click', function() { 
     $(this).find('td').toggleClass('bg'); 
    }); 
});​ 

DEMO。