JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main_table" class="grid-view">
    <table class="items">
        <thead>
            <tr>
                <th id="main_table_c0"><a class="sort-link" href="#">Date</a>
                </th>
                <th id="main_table_c1"><a class="sort-link asc" href="#">Time</a>
                </th>
                <th id="main_table_c2"><a class="sort-link" href="#">Date and time</a>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="odd">
                <td class="date_cell">06/22/2010</td>
                <td class="time_cell">09:00:00</td>
                <td class="datetime_cell">06/21/2010 11:00:00</td>
            </tr>
            <tr class="even">
                <td class="date_cell">06/23/2010</td>
                <td class="time_cell">23:00:00</td>
                <td class="datetime_cell">06/23/2010 22:30:00</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.grid-view table.items {
background: white;
border-collapse: collapse;
width: 100%;
border: 1px #D0E3EF solid;
}

.grid-view table.items th {
color: white;
background: #CCC ;
text-align: center;
}

.grid-view table.items th a {
color: #EEE;
font-weight: bold;
text-decoration: none;
}
.grid-view table.items tr.odd {
background: #E5F1F4;
}
.grid-view table.items tr.even {
background: #F8F8F8;
}
.grid-view table.items tr.selected {
background: #BCE774;

JavaScript

$('#main_table table tr').live('click',function(){
   $('#main_table table tr').each(function(){
    	$(this).removeClass('selected'); 
  });
    $(this).addClass('selected');
    return false;
 });