Question

I have a table which is zebra-striped (different background color for each odd rows). I apply an highlight effect (changing background color for 3 seconds) provided by jQuery after a row is edited. It works only on white rows (without background color).

Any chance this highlight effect can be aplied on any rows?

Here is the code of the javascript file:

$('#MyRowToHighlight').effect("highlight", {}, 1500); 

Here is the head of my table:

<table class="zebra-striped">
    <thead>
        <tr>
            <th>Company</th>
            <th>Username</th>
            ...

Here is the CSS of zebra-striped:

.zebra-striped tbody tr:nth-child(odd) td{background-color:#f9f9f9;}
.zebra-striped tbody tr:hover td{background-color:#f5f5f5;}

Thanks.

Answer 1

My guess from the limited html and JS you’ve shown, based on your selector being "#MyRowToHighlight", is that your highlight effect is being applied at the row level, i.e., to the tr, but your stylesheet is applying a background colour to the odd rows at the cell level, i.e., to the tds. The tr style is trumped by the td style. Assuming I’m on the right track here, the reason the highlight works on the even rows is that they don’t have a style on their tds.

So, try changing the selector in this line:

$('#MyRowToHighlight').effect("highlight", {}, 1500);

To apply the effect to the tds in the row:

$('#MyRowToHighlight td').effect("highlight", {}, 1500);