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 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2002
    Location
    Noblesville, IN
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change BG color or <tr> when a checkbox is checked

    i'm not sure if this is a javascript or css thing, or both.

    i want to duplicate the file selection highlighting that hotmail and yahoomail uses.

    it's where the user selects a checkbox and the entire <tr> background color changes. and when the user deselects the checkbox the <tr> background goes back to the original color.
    Ed Ventura
    Graphic/Web Designer
    www.blackwatercompany.com

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Post an HTML snippet of an entire table row and I'll use that to give you your result.

    Oh, and it's both CSS and Javascript (which is DHTML!)

  • #3
    New Coder
    Join Date
    Jul 2002
    Location
    Noblesville, IN
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    
    <body bgcolor="#FFFFFF" text="#000000">
    <form name="inboundForm">
       <table width="100%" border="0" cellpadding="2" align="center" cellspacing="0">
          <tr bgcolor="#EDEDED" class=listhead> 
             <td align="center" class="fontSize10" valign="top">&nbsp;</td>
             <td bgcolor="#EDEDED" width="100%" class="fontSize10" valign="top">Fax 
                Name</td>
             <td class="fontSize10" valign="top">Pages</td>
             <td class="fontSize10" valign="top">CSID<br>
                <img src="/img/spacer.gif" width="90" height="1"></td>
             <td class="fontSize10" valign="top">CID (Ani)<br>
                <img src="/img/spacer.gif" width="100" height="1"></td>
             <td class="fontSize10" valign="top">Received<br>
                <img src="/img/spacer.gif" width="160" height="1"></td>
          </tr>
          <tr class=msgold> 
             <td align="center" valign="top"> 
                <input type="checkbox" name="faxCheck" value="checkbox" >
             </td>
             <td valign="top"> 123456789</td>
             <td valign="top">3</td>
             <td valign="top">Mosaic</td>
             <td valign="top">8587123967</td>
             <td valign="top">12-06-01 8:53am</td>
          </tr>
          <tr class=msgold> 
             <td align="center" valign="top"> 
                <input type="checkbox" name="faxCheck" value="checkbox" >
             </td>
             <td valign="top"> 256154897</td>
             <td valign="top">1</td>
             <td valign="top">Data On Call</td>
             <td valign="top">6192235243</td>
             <td valign="top">12-06-01 9:53am</td>
          </tr>
          <tr class=msgold> 
             <td align="center" valign="top"> 
                <input type="checkbox" name="faxCheck" value="checkbox">
             </td>
             <td valign="top"> 159263487</td>
             <td valign="top">4</td>
             <td valign="top">Mosaic</td>
             <td valign="top">8587123967</td>
             <td valign="top">12-06-01 10:53am</td>
          </tr>
       </table>
    </form>
    </body>
    </html>
    Ed Ventura
    Graphic/Web Designer
    www.blackwatercompany.com

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    whoa, I just asked for one row...but that'll do

    Code:
    <script>
    function doRow(b, rowObj) {
             rowObj.className = (b) ? 'newClass' : 'msgold';
             }
    </script>
    
    (....HTML....)
    
          <tr class=msgold> 
             <td align="center" valign="top"> 
                <input type="checkbox" name="faxCheck" value="checkbox" onClick="doRow(this.checked, this.parentNode.parentNode);">
             </td>
             <td valign="top"> 123456789</td>
             <td valign="top">3</td>
             <td valign="top">Mosaic</td>
             <td valign="top">8587123967</td>
             <td valign="top">12-06-01 8:53am</td>
          </tr>
    obviously, newClass is the class name of your 'higlighted' tr class.
    Last edited by beetle; 08-22-2002 at 07:47 PM.


  •  

    Posting Permissions

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