Table row highlight

Table row highlight, other rows lowopacity

by Ayyappan Sakthivadivel

HTML

<table id="mytable" class="table-striped">
    <tbody>
        <tr><td>blah blah blah blah</td></tr>
        <tr><td>blah blah blah blah</td></tr>
        <tr><td>blah blah blah blah</td></tr>
        <tr><td>blah blah blah blah</td></tr>
        <tr><td>blah blah blah blah</td></tr>
    </tbody>
</table>

CSS

.table-striped tbody tr:nth-child(odd) td {
    background-color: green;
}

.table-striped tbody tr.highlight td {
    background-color: red;
}

.low-opacity{
  opacity: 0.5;
}

JavaScript

$('#mytable tbody tr').live('click', function(event) {
    $(this).addClass('highlight').removeClass('low-opacity').siblings().removeClass('highlight').addClass('low-opacity');
});