How to remove background color tr from Twitter upload table?

Question

I use Twitter Bootstrap v 2.0.1 and gave my table a class with a strip. I am trying to change the color of a string if I clicked. This works fine, except for every nth line that does not have a stripe color. I guess I need to remove the striped color first, but my attempt failed. Any idea what I am missing?

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> 

My jQuery attempt:

 <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> 

What am I doing wrong?

Answer 1

Well, since they are created using: tr:nth-child(odd) td , we cannot just “delete” the class with the table strip , as this will affect the entire table.

Create your own class, say: .highlightBG { background:#5279a4; } .highlightBG { background:#5279a4; }

And do it instead:

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

Answer 2

table-striped is a class in the table, not <tr> or siblings, so either create a new class to switch to <tr> or jQuery parents('table') , or change $(this) to $('table.table')

In the end, I think you want to keep the strip in all the other lines and change the current one, if so, then use the first sentence and redefine the new css class to $(this) Do not remove the striped table and make sure your new class has higher specificity.