I have a html zebra table which is generated dynamically. Upon clicking on any of the rows that row should get highlighted. I am unable to achieve this due to the css specified for achieving the zebra pattern for the table.

The code for the above is:


HTML Code:
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="main.css" rel="stylesheet" type="text/css">
    <title>Search Approver</title>
<body onLoad="setFocus(); window.resizeTo(655,450)">
<form id="approverForm" name="approverForm">

<div id="approverwindowresults">
    <th colspan="3" align="center">
        Select a group
<tr  id="230552" onClick="HighLightTR(230552);"><td>230552</td><td>Row1</td><td>nitin14341@yahoo.com</td></tr>
<tr  id="230553" onClick="HighLightTR(230553);"><td>230553</td><td>Row2</td><td>nitin14341@yahoo.com</td></tr>
<tr  id="230554" onClick="HighLightTR(230554);"><td>230554</td><td>Row3</td><td>nitin14341@yahoo.com</td></tr>
<tr  id="230555" onClick="HighLightTR(230555);"><td>230555</td><td>Row4</td><td>nitin14341@yahoo.com</td></tr>

HTML Code:
    margin: 5% 5% 2% 5%;
    border: 1px solid grey;
    overflow: auto;
    width: 20%;
    height: 200px;
    #approverwindowresults table
        width: 100%;
        margin: 0px;
        border-collapse: collapse;
        border: 0px solid #BBBBBB;
        cellspacing: 0px;
    #approverwindowresults table td
        height: 17px;
        white-space: nowrap;
        padding-left: 3px;
        background-color: rgb(255,255,255);
    #approverwindowresults table tr:nth-child(2n) td
        background-color: rgb(237,243,254);
    #approverwindowresults table tr td.spec
        background: rgb(211,230,253);

HTML Code:
function HighLightTR (grpid) {
    alert ('Entered HighLightTR');
    document.getElementById(grpid).style.background = '#3875D7';
    alert ('Exiting HighLightTR');
Please provide some help on this