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 5 of 5
  1. #1
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,773
    Thanks
    19
    Thanked 155 Times in 146 Posts

    highlight HTML table row onClick

    I can;t seem to get the background color of the <tr> element to change color with this script:

    Code:
    <HTML>
    <HEAD>
    <TITLE></TITLE>
    
    <script type="text/javascript">
    <!--
    function highlightRow()
    {
    	if (document.getElementById('id23').checked)
    	{
    		document.getElementById('row23').bgcolor = '#E2E6A8';
    	}
    }
    -->
    </script>
    
    </HEAD>
    
    <BODY>
    
    <table>
    <tr bgcolor="#CCCCCC" id="row23">
    
    <td width="25px"><input id="id23" name="id[23]" type="checkbox" value="23" onClick="highlightRow();"></td>
    <td width="150px">26 May 2006 14:25</td><td width="150px">test <test@data...></td><td width="300px">Re: testingggggggg</td>
    <td width="125px">0.80 KB</td>
    <td width="50px">23</td></tr>
    </table>
    
    </BODY>
    </HTML>
    Any help is appreciated.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,773
    Thanks
    19
    Thanked 155 Times in 146 Posts
    nevermind, 'bgcolor' should be 'bgColor'....

    how dumb is that
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 500 Times in 487 Posts
    no matter
    here is a generic version
    Code:
    <HTML>
    <HEAD>
    <TITLE></TITLE>
    
    <script type="text/javascript">
    <!--
    function highlightRow(obj){
     var tr=obj;
     while (tr.tagName.toUpperCase()!='TR'&&tr.parentNode){
      tr=tr.parentNode;
     }
     if (!tr.col){tr.col=tr.bgColor; }
     if (obj.checked){
      tr.bgColor='#E2E6A8';
     }
     else {
      tr.bgColor=tr.col;
     }
    }
    
    -->
    </script>
    
    </HEAD>
    
    <BODY>
    
    <table>
    <tr bgcolor="#CCCCCC" id="row23">
    
    <td width="25px"><input id="id23" name="id[23]" type="checkbox" value="23" onClick="highlightRow(this);"></td>
    <td width="150px">26 May 2006 14:25</td><td width="150px">test <test@data...></td><td width="300px">Re: testingggggggg</td>
    <td width="125px">0.80 KB</td>
    <td width="50px">23</td></tr>
    </table>
    
    </BODY>
    </HTML>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,773
    Thanks
    19
    Thanked 155 Times in 146 Posts
    I prefer to use getElementById..

    This is the generic function that I'm actually using (the previous one was to isolate the problem)...still short:

    Code:
    function highlightRow(row_id,check_id,default_color)
    {
    	if (document.getElementById(check_id).checked)
    	{
    		document.getElementById(row_id).bgColor = '#E2E6A8';
    	}
    	else
    	{
    		document.getElementById(row_id).bgColor = default_color;
    	}
    }
    function call:
    <tr bgColor="#F0F0F0" id="row8">
    <td width="25px"><input id="id8" name="id[8]" type="checkbox" value="8" onClick="highlightRow('row8','id8','#F0F0F0');"></td>
    <td width="150px">23 May 2006 20:59</td><td width="150px">Aaron Johnson...</td>
    <td width="300px">RE: RE: TEST</td>
    <td width="125px">1.49 KB</td>
    <td width="50px">8</td>
    </tr>
    Last edited by chump2877; 05-30-2006 at 09:37 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 500 Times in 487 Posts
    no accounting for taste
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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