Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question <tr> bgcolor change w/ checkbox

    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!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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

  • #3
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    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>?

  • #4
    New Coder
    Join Date
    Jan 2005
    Location
    Atlanta
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    y1r.style.backgroundColor='yellow';}

    SHOULD BE

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

    You need to fix all of them....

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #6
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!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>

  • #7
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    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!

  • #8
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    I forgot to mention that this is the error I get in Netscape 4.75:

    document.getElementById is not a function.

  • #9
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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?
    Last edited by hemebond; 02-02-2005 at 01:15 AM.

  • #10
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts

    Just a friendly advice...

    Quote Originally Posted by PROWEBWORKS.NET
    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.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #12
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well I am not going to use a script that returns error messages. There has to be a way to achieve this.

  • #13
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by PROWEBWORKS.NET
    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 }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •