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: <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: #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: function HighLightTR (grpid) { alert ('Entered HighLightTR'); document.getElementById(grpid).style.background = '#3875D7'; alert ('Exiting HighLightTR'); } Please provide some help on this
