Changing background color for rows of a form onFocus

Forum Moderators: open

Message Too Old, No Replies

Changing background color for rows of a form onFocus

dougmcc1

6:48 am on Dec 30, 2003 (gmt 0)

I have a form with a table and each input field is a new row. How do I make the table row backgrounds change color onFocus of the input fields? I want it to work by tabbing down the list and by clicking on each field. Thanks in advance.

dmorison

7:12 am on Dec 30, 2003 (gmt 0)

Here's a quick'n'dirty no-loop-variables Internet Explorer only hack, but it should give you a starting point. Constants bg1 and bg2 are the two background colors, bg1 for out of focus and bg2 for in-focus.

<html>
<body>
<form name='myform'>
<table cellpadding='10' border='1'>
<tr id='row1'><td><input type='text' onfocus='javascript:setbg(row1);'></td></tr>
<tr id='row2'><td><input type='text' onfocus='javascript:setbg(row2);'></td></tr>
<tr id='row3'><td><input type='text' onfocus='javascript:setbg(row3);'></td></tr>
</table>
</form>
<script type='text/javascript'>
var bg1 = "#ccffcc";
var bg2 = "#ffcccc";
function clearall()
{
document.all.row1.style.backgroundColor = bg1;
document.all.row2.style.backgroundColor = bg1;
document.all.row3.style.backgroundColor = bg1;
}
function setbg(row)
{
clearall();

row.style.backgroundColor = bg2;
}
clearall();
</script>
</body>
</html>

dougmcc1

10:04 pm on Dec 30, 2003 (gmt 0)

That's what I wanted, thanks. Too bad it doesn't work in Netscape or Opera.

DrDoc

10:08 pm on Dec 30, 2003 (gmt 0)

It works if you use document.getElementById instead of document.all (which is IE proprietary)...

dougmcc1

12:01 am on Dec 31, 2003 (gmt 0)

I changed document.all to document.getElementById but it didnt seem to make any changes in Netscape or Opera so I did this instead. It works in Netscape now but still doesn't work in Opera:


<script type='text/javascript'> 
function display(value)
{
var displaybg="row"+value;
var displaybg=document.getElementById(displaybg);
displaybg.style.backgroundColor="#efefef";
}
function remove(value)
{
var removebg="row"+value;
var removebg=document.getElementById(removebg);
removebg.style.backgroundColor="#ffffff";
}
</script>


<form>
<table>
<tr id="row1">
<td><input type="text" name="name" onFocus="javascript:display(1);" onBlur="javascript:remove(1);"></td>
</tr>
</table>

DrDoc

7:31 pm on Dec 31, 2003 (gmt 0)

Yeah, it will get confused...

Why not just do:
document.getElementById(displaybg).style.backgroundColor="#efefef";
instead of:
document.getElementById(displaybg);
displaybg.style.backgroundColor="#efefef";