SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Location
    earth
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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. 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!

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Location
    earth
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Location
    earth
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

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