Change the background color of a row in a table upon mouse click

Newbie Member
26Apr2010,15:44   #1
teetu14341's Avatar
Hi,

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:

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

<div id="approverwindowresults">
<table>
<tr>
    <th colspan="3" align="center">
        Select a group
    </th>
</tr>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
</tr>
<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>
</table>
</div>


</form>
</body>
</html>
main.css:
HTML Code:
#approverwindowresults
{
    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);
    }
approver.js:

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