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

Thread: Help

  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help

    I have a table as follows

    <tr>
    <td><input class='checkRow' type='checkbox' name='radio[]' value='<? print $id; ?>'></td>
    <td>My Name</td>
    <td>Date</td>
    </tr>


    i want some code so when the checkbox is clicked it will change the background of the row!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,174
    Thanks
    23
    Thanked 601 Times in 600 Posts
    Code:
    <table>
    <tr id="row" style="background:yellow;">
    <td><input type="checkbox" onclick="document.getElementById('row').style.background = '#CC9999'" /></td>
    <td>My Name</td>
    <td>Date</td>
    </tr>
    </table>

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,985
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Presumably you wish to toggle the color back again if the box is unchecked:

    Code:
    <table>
    <tr id="row" style="background:yellow;">
    <td><input type="checkbox" onclick="togglecolor()" /></td>
    <td>My Name</td>
    <td>Date</td>
    </tr>
    </table>
    
    
    <script type = "text/javascript">
    var count = 0;
    function togglecolor() {
    if (count%2 == 0) {
    document.getElementById('row').style.background = 'blue'
    }
    else {
    document.getElementById('row').style.background = 'yellow'
    }
    count ++;
    }
    
    </script>


    "Dives sum, si non redo eis quibus debeo. - I am a rich man as long as I do not pay my creditors"

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Imo a better way to do this is not give the row an id because it doesn't need one to do what you want. Only give the row an id if it needs one for something else.

    When the checkbox is clicked you can iterate up through the DOM from the checkbox until you find its <tr> (using .parentNode). When you find the object reference for the checkbox's <tr> you can then simply set the <tr>'s colour according to whether the checkbox is currently checked or not.

    Using this method you are not tying your function to an id and you don't have to pass an id to the function either - and so you can use the same function for all the checkboxes on each row without having to mess with id's for the rows.

    You also don't need a counter to check if a checkbox is checked or not. You can simply look at the value of the checkbox's checked attribute. If there is a "select all" checkbox that checks all the checkboxes then your counter will most probably be out of sync. when the "Select all" checkbox is clicked.
    Last edited by bullant; 07-21-2011 at 12:26 PM.

  • Users who have thanked bullant for this post:

    webdev1958 (08-13-2011)


  •  

    Posting Permissions

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