...

View Full Version : <tr> bgcolor change w/ checkbox



dlg0351
02-01-2005, 10:28 PM
Can someone tell me why this does NOT work in Netscape. I am trying to change the background color of an entire row by clicking a checkbox. It works fine in IE but does not work in Netscape.

<html>
<head>
<title></title>

<script language="Javascript">
<!--
function changeBG()
{
if(document.form.y1.checked){
y1r.style.backgroundColor='yellow';}
if(document.form.y2.checked){
y2r.style.backgroundColor='yellow';}
if(document.form.y3.checked){
y3r.style.backgroundColor='yellow';}

if(!document.form.y1.checked){
y1r.style.backgroundColor='white';}
if(!document.form.y2.checked){
y2r.style.backgroundColor='white';}
if(!document.form.y3.checked){
y3r.style.backgroundColor='white';}
}
//-->
</script>
</head>

<body>

<form name="form">
<table border=0 cellpadding=0 cellspacing=1 bgcolor=red width=500>
<tr>
<td>
<table border=0 cellpadding=0 cellspacing=0 bgcolor=white width=100%>
<tr id="y1r">
<td><input type="checkbox" name="y1" onClick="changeBG();"></td>
<td>&nbsp;</td>
</tr>

<tr id="y2r">
<td><input type="checkbox" name="y2" onClick="changeBG();"></td>
<td>&nbsp;</td>
</tr>

<tr id="y3r">
<td><input type="checkbox" name="y3" onClick="changeBG();"></td>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</form>

</body>
</html>

Any help is greatly appreciated!

_Aerospace_Eng_
02-01-2005, 10:35 PM
because the tr tag shouldn't have any formatting, yes IE does read it thats because its doesn't go by the books according to semantics, u could always place another td that is a certain width and just define a style to that td

dlg0351
02-01-2005, 11:00 PM
How do they achieve this on hotmail.com when you click the checkbox of yur email? It works in Netscape. Can you make the click of a checkbox change the bgcolor of multiple <td>?

jmccaskill
02-01-2005, 11:46 PM
You could define a CSS class, say .colorRow, and specify a background color for .colorRow td. Then you could have the onclick of the checkbox change the className of the tr to either "colorRow" is the checkbox is checked or "" if it isn't.

A1ien51
02-01-2005, 11:48 PM
y1r.style.backgroundColor='yellow';}

SHOULD BE

document.getElementById("y1r").style.backgroundColor='yellow';}

You need to fix all of them....

Eric

hemebond
02-02-2005, 12:10 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>44698</title>
<style type="text/css">
table
{
width:500px;
}
</style>
</head>
<body>

<form name="form">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="y1" onclick="toggleColour(this);"></td>
<td></td>
</tr>

<tr>
<td><input type="checkbox" name="y2" onclick="toggleColour(this);"></td>
<td></td>
</tr>

<tr>
<td><input type="checkbox" name="y3" onclick="toggleColour(this);"></td>
<td></td>
</tr>
</tbody>
</table>
</form>

<script type="text/javascript">
var list = document.getElementsByTagName("tbody")[0].getElementsByTagName("tr");

function toggleColour(obj)
{
var row = findParentRow(obj);

row.style.backgroundColor = (row.style.backgroundColor == "yellow") ? "" : "yellow";
}

function findParentRow(obj)
{
var tmp = obj.parentNode;

if(tmp.nodeName.toLowerCase() != "tr")
{
tmp = findParentRow(tmp);
}

return tmp;
}
</script>
</body>
</html>

dlg0351
02-02-2005, 01:20 AM
Thanks fellas, I appreciate the help, one more question though. The document.getElementById worked in Netscape 7.1, however I always use Netscape 4.75 to test different scripts, if they don't work in 4.75 then I usually don't use them.

I have seen document.getElementById used many times when using an id. How can you get around this in Netscape 4.75? Also how can you achieve layers in old browsers without using document.getElementById?

Thanks!

dlg0351
02-02-2005, 01:25 AM
I forgot to mention that this is the error I get in Netscape 4.75:

document.getElementById is not a function.

hemebond
02-02-2005, 02:12 AM
As long as everything works in N4 without Javascript, why not just leave it in for people who have gone to the effort to use a modern browser?

dlg0351
02-02-2005, 02:19 AM
No what I am saying is document.getElementById does not work in Netscape 4.75. I have had the same issue with getting document.getElementById to work using layers in Netscape 4.75. I wanted to know if anyone knows how to get the <tr> bgcolor change w/ checkbox to work not using document.getElementById.

glenngv
02-02-2005, 06:23 AM
however I always use Netscape 4.75 to test different scripts, if they don't work in 4.75 then I usually don't use them.

I advice you to change your mindset now or else you will maintain your stagnant growth. I have really nothing against NS4 but to have that "if they don't work in 4.75 then I usually don't use them" attitude will not do you any good.

dlg0351
02-02-2005, 04:58 PM
Well I am not going to use a script that returns error messages. There has to be a way to achieve this.

Willy Duitt
02-02-2005, 05:12 PM
Well I am not going to use a script that returns error messages. There has to be a way to achieve this.

if(!document.getElementById()){ return }



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum