Change the color of single rows of a Bootstrap striped table

Question

I wan't to change the color of individual rows of an striped table by using JQuery:

$("#rowElementId").addClass("activeRow");

The css class activeRow looks like this:

.activeRow {
background-color: #d9d9d9;
}

The table itself looks like this:

<table class="table table-striped">
    <thead>
        <tr id=...>
        ...

The problem is, that my solution, the JQuery instruction, only works for the white rows of the striped table. How can I change this?

Here you can find an example of my problem: Bootstrap

Answer 1

Specificity is off. The current row color selector is the following in bootstrap 3: .table-striped>tbody>tr:nth-of-type(odd).

You should make your style this to increase its specificity:

.table-striped>tbody>tr.activeRow{
    background-color: #d9d9d9;
}

Edit: here is a fork of your bootply demonstrating this method. (I've added extra rows for clarity)