PDA

View Full Version : highlight a table cell with onClick

langer
06-22-2006, 05:15 AM
Hi

I am trying, without much success, to create a table where you can click the cell (either radio button or anywhere in the cell) and highlight the cell. Then click the next cell and have the new cell highlighted and the old cell returns to its original state.

I have defined an orginal background cell colour, I then use onClick to create the highlight, then onBlur to remove the bgrd colour.

This has mixed results in FF this works when you used the radio buttons. However if you click in the cell it highlights but is not removed when you click another cell.

IE allows you to select and highlight a cell but doesn't remove the highlight.

Any suggestions or pointers are gratefully accepted.

======================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
table {
width:400px;
font-family:Verdana, Arial, Helvetica, sans-serif;
border:1px solid #000;
}
table td {border:1px solid #000;}
.bgrd {background-color:#CCCCCC;}
.bgrd_selected {background-color:#FFCC00;}

</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td class="bgrd" onclick="className='bgrd_selected';" onblur="className='bgrd';"><input name="btn" type="radio" value="btn" />
Select</td>
<td class="bgrd" onclick="className='bgrd_selected';" onblur="className='bgrd';"><input name="btn" type="radio" value="btn" />
Select</td>
<td class="bgrd" onclick="className='bgrd_selected';" onblur="className='bgrd';"><input name="btn" type="radio" value="btn" />
Select</td>
</tr>
</table>
</body>
</html>

Cheers

Langer
_Aerospace_Eng_
06-22-2006, 05:46 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
table {
width:400px;
font-family:Verdana, Arial, Helvetica, sans-serif;
border:1px solid #000;
}
table td {border:1px solid #000;}
.bgrd {background-color:#CCCCCC;cursor:pointer;}
.bgrd_selected {background-color:#FFCC00;cursor:pointer;}

</style>
<script type="text/javascript">
function setColor(what)
{
var thetds = document.getElementsByTagName('td');
for(var i = 0; i < thetds.length; i++)
{
if(thetds[i].className == 'bgrd_selected')
{
thetds[i].className = 'bgrd';
}
}
what.className = 'bgrd_selected';
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td class="bgrd" onclick="setColor(this)"><input name="btn" type="radio" value="btn" />
Select</td>
<td class="bgrd" onclick="setColor(this)"><input name="btn" type="radio" value="btn" />
Select</td>
<td class="bgrd" onclick="setColor(this)"><input name="btn" type="radio" value="btn" />
Select</td>
</tr>
</table>
</body>
</html>
langer
06-22-2006, 06:36 AM
Sterling work _Aerospace_Eng_ it works a treat

However (my fault for not explaining fully) I have multi columns each which is a different colour. I will dissect your script and try my hardest to custiomise it to my needs.

I may need to ask additional information by the end of the day though.

Much appreciated old chap

Langer