如何从Twitter Bootstrap表中删除背景tr颜色？

我使用的是Twitter Bootstrap v 2.0.1，并且给了我的表格表格条带类。我试图改变行颜色，如果点击。除了每个没有条纹颜色的第n行以外，这种方法非常有效。我认为我需要先删除条纹颜色，但我的尝试失败了。任何想法我失踪？如何从Twitter Bootstrap表中删除背景tr颜色？

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的尝试（S）：

<script type="text/javascript"> 


$(document).ready(function(){ 

    $('tr').click(function() { 
     $(this).siblings().removeClass('table-striped'); 
     //$(this).css('background-color', '#ff0000').siblings().removeClass('table-striped'); 
    }); 
}); 

</script>

我在做什么错？

来源

2012-09-27 user1216398

好吧，因为它们是通过使用：tr:nth-child(odd) td创建的，所以我们不能简单地“移除”类表格条带，因为它会影响整个表格。

创建自己的类让我们说：.highlightBG { background:#5279a4; }

而做到这一点，而不是：

$('table.table-striped tr').on('click', function() { 
    $(this).find('td').addClass('highlightBG'); 
    // potentially even .toggleClass('highlightBG'); to alternate it 
});

来源

2012-09-27 15:10:18

这是有道理的...你的建议工作，感谢您的帮助！ – user1216398

是否可以使用切换CSS选择器？用户可以定义背景颜色，所以最终我想切换：$（this）.find（'td'）.css（'background-color'，'＃ff0000'）; – user1216398

表条纹在桌子上的一类，而不是<tr>或兄弟姐妹，所以无论是创建一个新类来切换<tr>或jQuery的parents('table')或更改$(this)到$('table.table')

在最后，我认为要保持条纹上的所有其他行，改变当前选择的，如果是这种情况，那么使用第一个建议并覆盖$(this)上的一个新的CSS类别不要删除表格条纹，并确保您的新类具有更高的特异性。

来源

2012-09-27 15:13:27 KnowHowSolutions

如何从Twitter Bootstrap表中删除背景tr颜色？

回答

相关问题