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
    Dec 2003
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Changing all the row background colors when checkbox checked

    Just like the title says, I'd like to change all the row background colors in a table when a checkbox checked (and undo it changing it back to white when unchecked). Not just any checkbox, however, only the checkbox found at row 1, column 1. This is the code that I have:

    Code:
    <script type="text/javascript">
    function highlight_row(the_element, checkedcolor) {
    	if(the_element.parentNode.parentNode.style.backgroundColor != checkedcolor) {
    		the_element.parentNode.parentNode.style.backgroundColor = checkedcolor;
    	} else {
    		the_element.parentNode.parentNode.style.backgroundColor = 'white';
    	}
    }
    
    function set_hover(the_row, color, checkedcolor) {
    	if(the_row.style.backgroundColor != checkedcolor) {
    		the_row.style.backgroundColor = color;
    	}
    }
    
    function remove_hover(the_row, color, checkedcolor) {
    	if(the_row.style.backgroundColor != checkedcolor) {
    		the_row.style.backgroundColor = color;
    	}
    }
    </script>
    
    <form action="someform.php" method="post">
      <table width="48%" border="1" cellspacing="1" cellpadding="1">
        <tr> 
          <td width="4%"><input type="checkbox" name="checkbox2" value="checkbox"> </td>
          <td width="17%">Hero</td>
          <td width="20%">FirstName</td>
          <td width="59%">LastName</td>
        </tr>
        <tr onmouseover="set_hover(this, '#DEE3E7', 'orange');" onmouseout="remove_hover(this, '#FFFFFF','orange')"> 
          <td><input type="checkbox" name="checkbox1" value="checkbox" onclick="highlight_row(this, 'orange');"></td>
          <td>Batman</td>
          <td>Bruce</td>
          <td>Wayne</td>
        </tr>
        <tr onmouseover="set_hover(this, '#DEE3E7', 'orange');" onmouseout="remove_hover(this, '#FFFFFF', 'orange')"> 
          <td><input type="checkbox" name="checkbox2" value="checkbox" onclick="highlight_row(this, 'orange');"></td>
          <td>Spider-Man</td>
          <td>Peter</td>
          <td>Parker</td>
        </tr>
        <tr onmouseover="set_hover(this, '#DEE3E7', 'orange');" onmouseout="remove_hover(this, '#FFFFFF', 'orange')"> 
          <td><input type="checkbox" name="checkbox3" value="checkbox" onclick="highlight_row(this, 'orange');"></td>
          <td>Venom</td>
          <td>Eddie</td>
          <td>Brock</td>
        </tr>
        <tr onmouseover="set_hover(this, '#DEE3E7', 'orange');" onmouseout="remove_hover(this, '#FFFFFF', 'orange')">
          <td><input type="checkbox" name="checkbox4" value="checkbox" onclick="highlight_row(this, 'orange');"></td>
          <td>Superman</td>
          <td>Clark</td>
          <td>Kent</td>
        </tr>
      </table>
    <input type="submit" value="submit">
    </form>
    So far I have it so that when you click on a checkbox other than the one found at row 1, column 1, it changes the color of only that particular row.

    Any thoughts? Thanks!
    Last edited by jessjenn; 12-29-2003 at 05:23 PM.

  • #2
    New Coder
    Join Date
    Dec 2003
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I managed to change the colors of all the rows by changing the color of the table's background when the checkbox is checked. It switches back to white when unchecked as intended to. The only problem I'm having is when I hover the mouse over each row. I have code in there that changes the background color of each row when the mouse hovers each row.

    The problem is that once the mouse hovers over a row, and the top left checkbox checked (row 1, column 1), that row doesn't change color along with the other rows. Here's the code:

    Code:
    <script type="text/javascript">
    function highlight_row(the_element, checkedcolor) {
    	if(the_element.parentNode.parentNode.style.backgroundColor != checkedcolor) {
    		the_element.parentNode.parentNode.style.backgroundColor = checkedcolor;
    	} else {
    		the_element.parentNode.parentNode.style.backgroundColor = 'white';
    	}
    }
    
    function set_hover(the_row, color, checkedcolor) {
    	if(the_row.style.backgroundColor != checkedcolor) {
    		the_row.style.backgroundColor = color;
    	}
    }
    
    function remove_hover(the_row, color, checkedcolor) {
    	if(the_row.style.backgroundColor != checkedcolor) {
    		the_row.style.backgroundColor = color;
    	}
    }
    
    function set_table_color(color, checkedcolor) {
    	if(tablecolor.style.backgroundColor != checkedcolor) {
    		tablecolor.style.backgroundColor = checkedcolor;
    	} else {
    		tablecolor.style.backgroundColor = 'white';
    	}
    }
    
    </script>
    
    <form action="someform.php" method="post">
      <table width="48%" border="1" cellspacing="1" cellpadding="1" id="tablecolor">
        <tr> 
          <td width="4%"><input type="checkbox" name="checkbox2" value="checkbox" onClick="set_table_color('#FFFFFF','orange')" > </td>
          <td width="17%">Hero</td>
          <td width="20%">FirstName</td>
          <td width="59%">LastName</td>
        </tr>
        <tr onmouseover="set_hover(this, '#DEE3E7', 'orange');" onmouseout="remove_hover(this, '#FFFFFF','orange')"> 
          <td><input type="checkbox" name="checkbox1" value="checkbox" onclick="highlight_row(this, 'orange');"></td>
          <td>Batman</td>
          <td>Bruce</td>
          <td>Wayne</td>
        </tr>
        <tr onmouseover="set_hover(this, '#DEE3E7', 'orange');" onmouseout="remove_hover(this, '#FFFFFF', 'orange')"> 
          <td><input type="checkbox" name="checkbox2" value="checkbox" onclick="highlight_row(this, 'orange');"></td>
          <td>Spider-Man</td>
          <td>Peter</td>
          <td>Parker</td>
        </tr>
        <tr onmouseover="set_hover(this, '#DEE3E7', 'orange');" onmouseout="remove_hover(this, '#FFFFFF', 'orange')"> 
          <td><input type="checkbox" name="checkbox3" value="checkbox" onclick="highlight_row(this, 'orange');"></td>
          <td>Venom</td>
          <td>Eddie</td>
          <td>Brock</td>
        </tr>
        <tr onmouseover="set_hover(this, '#DEE3E7', 'orange');" onmouseout="remove_hover(this, '#FFFFFF', 'orange')">
          <td><input type="checkbox" name="checkbox4" value="checkbox" onclick="highlight_row(this, 'orange');"></td>
          <td>Superman</td>
          <td>Clark</td>
          <td>Kent</td>
        </tr>
      </table>
    <input type="submit" value="submit">
    </form>

    Any help is appreciated. Thanks.

  • #3
    New Coder
    Join Date
    Dec 2003
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is what it looks like: http://a.1asphost.com/mikky/exp91.htm

    You can see the problem when you click the top left checkbox then after hovering over all the other rows. The color of those rows don't change.

  • #4
    New Coder
    Join Date
    Dec 2003
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone?


  •  

    Posting Permissions

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