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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question newbie question --- wholesale row color change

    Easier to show than to explain:

    Code:
    <head>
    
    <SCRIPT LANGUAGE="JavaScript">
    function checkAll(field) { for (i = 0; i < field.length; i++) field[i].checked = true ; }
    function uncheckAll(field) { for (i = 0; i < field.length; i++) field[i].checked = false ; }
    </script>
    
    </head>
    
    <body>
    
    <form name="myform">
    
    <table>
    <tr id="CA" name="list" value="1" style="background-color:yellow;"> <td> <input type="checkbox" name="list" value="1" onclick="document.getElementById('CA').style.backgroundColor=this.checked?'white':'cyan';">Choice CA</td> </tr>
    <tr id="CB" name="list" value="1" style="background-color:yellow;"> <td> <input type="checkbox" name="list" value="1" onclick="document.getElementById('CB').style.backgroundColor=this.checked?'white':'cyan';">Choice CB</td> </tr>
    <tr id="CC" name="list" value="1" style="background-color:yellow;"> <td> <input type="checkbox" name="list" value="1" onclick="document.getElementById('CC').style.backgroundColor=this.checked?'white':'cyan';">Choice CB</td> </tr>
    </table>
    
    <input type="button" name="CheckAll" value="Check All" onClick="checkAll(document.myform.list)">
    <input type="button" name="UnCheckAll" value="Uncheck All" onClick="uncheckAll(document.myform.list)">
    
    </form>
    
    <p>All never touched should be yellow. All checked should have white background.  All unchecked should have cyan background.</p>
    
    <p>How do I get 'Check All' and 'Uncheck All' to obey the tr background color, too?</p>
    Last edited by iaw4; 01-15-2012 at 03:18 AM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    like this?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    
    <script>
    function checkAll(field) { 
    for (i = 0; i < field.length; i++) { 
    field[i].checked = true ; 
    changeBG(field[i])
    	}
    }	
    
    function uncheckAll(field) { 
    for (i = 0; i < field.length; i++) {
    field[i].checked = false ; 
    changeBG(field[i])
    	}
    }
    
    function changeBG(box) { 
    if(box.checked==true){
    box.parentNode.style.backgroundColor="#FFFFFF"
    	} else {
    box.parentNode.style.backgroundColor="#00FFFF"
    	}
    }	
    </script>
    
    </head>
    
    <body>
    
    <form name="myform">
    
    <table>
    <tr id="CA" name="list" value="1" style="background-color:yellow;"> <td> <input type="checkbox" name="list" value="1" onclick="changeBG(this)">Choice CA</td> </tr>
    <tr id="CB" name="list" value="1" style="background-color:yellow;"> <td> <input type="checkbox" name="list" value="1" onclick="changeBG(this)">Choice CB</td> </tr>
    <tr id="CC" name="list" value="1" style="background-color:yellow;"> <td> <input type="checkbox" name="list" value="1" onclick="changeBG(this)">Choice CB</td> </tr>
    </table>
    
    <input type="button" name="CheckAll" value="Check All" onClick="checkAll(document.myform.list)">
    <input type="button" name="UnCheckAll" value="Uncheck All" onClick="uncheckAll(document.myform.list)">
    
    </form>
    
    <p>All never touched should be yellow. All checked should have white background.  All unchecked should have cyan background.</p>
    
    <p>How do I get 'Check All' and 'Uncheck All' to obey the tr background color, too?</p>
    </body>
    </html>
    Last edited by xelawho; 01-15-2012 at 02:44 AM.

  • Users who have thanked xelawho for this post:

    iaw4 (01-15-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks. this was perfect.

    best,

    /iaw4


  •  

    Tags for this Thread

    Posting Permissions

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