HighLight and select a row of HTML Table

by Serge

HTML

<table id='maintable' class='table-fill' cellpadding='0' border='1' cellspacing='0'>
  <tr>
    <th position='fixed' overflow='hidden' width='10%'>Book Name</th><th width='5%'></th>
  </tr>
  <tr>
    <td colspan=2>
    <div style='padding-bottom: 0;'><a href='library.details.php?id=id' target='content' class='positiontitle-link'>A Baker's Dozen</a></div>
<div style=' padding-top: 0; padding-left: 15px; width: 40%; float:left;'> <font color='gray'>Author :</font> Book author name</div>
    <div  width='5%' style=' padding-top: 0; float:right;'> <font color='gray'>Year Published </font>1956г.</div>
    </td>
  </tr><tr>
    <td colspan=2>
        <div style='padding-bottom: 0;'><a href='library.details.php?id=id' target='content' class='positiontitle-link'>Adventure On the Rogue</a></div>
<div style=' padding-top: 0; padding-left: 15px; width: 40%; float:left;'> <font color='gray'>Author :</font> Other book author name</div>
    <div  width='5%' style=' padding-top: 0; float:right;'> <font color='gray'>Year Published </font>1975г.</div>
    </td>
  </tr>
</table>

CSS

#maintable {border-collapse:collapse;}

#maintable tr:hover {background-color: #FFFFAA;}
#maintable tr.selected td {
        background: none repeat scroll 0 0 #FFCF8B;
        color: #000000;
    }

JavaScript

$("#maintable tr").click(function(){
    //alert($(this).hasClass("selected"));
    if ($(this).hasClass("selected")){
        $(this).removeClass("selected");
    }else{
        $(this).addClass("selected").siblings().removeClass("selected");
    }
});