Question

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?

Answer 1

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
});