CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
user1216398
user1216398

Reputation: 1950

How can I remove a background tr color from a Twitter Bootstrap table?

I'm using Twitter Bootstrap v 2.0.1 and have given my table the table-striped class. I'm trying to change a row color if clicked. This works great except for every n:th row that doesn't have a stripe color. I assume I need to remove the striped color first but my attempt is failing. Any idea what I'm 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(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>

What am I doing wrong?

Upvotes: 1

Views: 3530

Answers (2)

KnowHowSolutions
KnowHowSolutions

Reputation: 680

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

In the end I think you want to keep the striping on all the other rows, and change the current selected, if that is the case then use the first suggestion and override with a new css class on $(this) Don't remove table-striped and make sure your new class has a higher specificity.

Upvotes: 0

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 66971

Well since they are created by using: tr:nth-child(odd) td, we can't simply "remove" the class table-striped, since it would effect the entire table.

Create your own class let's say: .highlightBG { background:#5279a4; }

And do this instead:

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

Upvotes: 2

Related Questions