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
    Jul 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change text color in row when checkbox selected

    Hi. I'm quite new to using code so please bear with me. I've setup a form in a table and if a checkbox is ticked, the background color changes along the whole row. Trouble is, the text doesn't stand out after this color change so I also need the text color to change from black to white when checked and revert to black if unchecked. Anyone know how I would do this? Here's the code I'm using to change the background color. Can I modify it or do I need new code? Thanks

    <script type="text/javascript">
    function change(obj) {
    var tr=obj.parentNode.parentNode;
    if(obj.checked) {
    tr.className+=' pink';
    }
    else {
    tr.className=tr.className.replace(' pink', '');
    }
    clickCh();
    }

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

    .nochange, tr {background-color:white;}
    tr.pink {
    background-color:#7247D1;
    }
    .light {background-color:#D2CAEB;}
    .dark {background-color:#B1AAD7;}

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

    <tr class="light">
    <td width="68" bgcolor="#000000" class="leftAlign" scope="row">&nbsp;</td>
    <td width="20" bgcolor="7247d1" class="leftAlign" scope="row">&nbsp;</td>
    <td width="21" class="leftAlign" scope="row">&nbsp;</td>
    <td class="leftAlign" scope="row">&nbsp;&nbsp;<strong> ProductA</strong> (details)</td>
    <td width="30" class="leftAlign" scope="row"><div align="center">20g</div></td>
    <td><input name="input4" onClick="change(this)" value="0.80" type="checkbox"></td>
    <td >&pound;0.15</td>
    <td>data1</td>
    <td>data2</td>
    <td>data3</td>
    <td>data4</td>

    <td bgcolor="7247d1">&nbsp;</td>
    <td bgcolor="#000000">&nbsp;</td>
    </tr>

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Code:
    <script type="text/javascript">
    function change(obj) {
    var tr=obj.parentNode.parentNode;
    if(obj.checked) {
    tr.className+=' pink';
    document.getElementById('text').style.color='#fff';
    }
    else {
    document.getElementById('text').style.color='#000';
    tr.className=tr.className.replace(' pink', '');
    }
    clickCh();
    }
    html/CSS

    Code:
    .nochange, tr {background-color:white;}
    tr.pink {
    background-color:#7247D1;
    }
    .light {background-color:#D2CAEB;}
    .dark {background-color:#B1AAD7;}
    #text {
    color:#fff;
    }
    
    <tr class="light">
    <td width="68" bgcolor="#000000" class="leftAlign" scope="row">&nbsp;</td>
    <td width="20" bgcolor="7247d1" class="leftAlign" scope="row">&nbsp;</td>
    <td width="21" class="leftAlign" scope="row">&nbsp;</td>
    <td class="leftAlign" scope="row">&nbsp;&nbsp;<strong> ProductA</strong> (details)</td>
    <td width="30" class="leftAlign" scope="row"><div align="center">20g</div></td>
    <td><input name="input4" onClick="change(this)" value="0.80" type="checkbox"></td>
    <td ><div id="text">&pound;0.15</div></td>
    <td>data1</td>
    <td>data2</td>
    <td>data3</td>
    <td>data4</td>
    
    <td bgcolor="7247d1">&nbsp;</td>
    <td bgcolor="#000000">&nbsp;</td>
    </tr>
    try that.

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks. Its almost there! Only the text in column 7 changes to white (the column after the checkbox). Its also white (not black) when the page loads, but it does toggle correctly after the box is checked/unchecked. So I just need to apply this change to all cells on the row and get the text to initially display as black. Thanks, Dren.


  •  

    Posting Permissions

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