| teetu14341 |
26Apr2010 15:44 |
Change the background color of a row in a table upon mouse click
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 |
