www.webdeveloper.com
Results 1 to 13 of 13

Thread: Toggle row color when Checkbox is checked/unchecked

  1. #1
    Join Date
    Dec 2006
    Posts
    3

    Toggle row color when Checkbox is checked/unchecked

    Hi - I have been fighting with this for a couple of days now. I have a dynamic table that is built via a query which has a checkbox at the beginning of the row. When a user clicks or checks a checkbox I need to have the row highlight to a different color and then if the user unchecks the checkbox I need to have the row go back to the original color. Below is my code at this point. I can get the row to highlight, but I cannot get the row to un-highlight when I check it again.

    Thanks in advance for the help!

    <script type="text/javascript"><!--

    function gregtest2()
    {
    var message = '';
    for (var i = 0; i <= 249; i++) {
    testchecked = document.form.elements[i].checked;
    if (testchecked == true) {
    try{HighLightTR('white','cc3333');}catch(e){;}
    }
    if (testchecked == false) {
    try{HighLightTR('gold','cc3333');}catch(e){;}
    }
    // document.form.price.value = ('$' + document.form.price.value);
    // $price = document.form.price.value;
    }
    }


    </script>

    <script>
    var preEl ;
    var orgBColor;
    var orgTColor;
    function HighLightTR(backColor,textColor){
    // if(typeof(preEl)!='undefined') {
    // preEl.bgColor=orgBColor;
    // try{ChangeTextColor(preEl,orgTColor);}catch(e){;}
    // }
    var el = event.srcElement;
    el = el.parentElement;
    orgBColor = el.bgColor;
    orgTColor = el.style.color;
    el.bgColor=backColor;

    try{ChangeTextColor(el,textColor);}catch(e){;}
    preEl = el;
    }

    function ChangeTextColor(a_obj,a_color){ ;
    for (i=0;i<a_obj.cells.length;i++)
    a_obj.cells(i).style.color=a_color;
    }
    </script>

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    Maybe try toggling the class name of the table row?
    Code:
    window.onload = function() {
      if (document.getElementsByTagName) {
        var inputs = document.getElementsByTagName('input');
        for (var i=0, end=inputs.length; i < end; i++) {
          if (inputs[i].className === 'toggleCheck') {
            inputs[i].onclick = function() {
              var TRnode = this.parentNode;
              while (TRnode.nodeName !== 'TR') {
                TRnode = TRnode.parentNode;
              }
              TRnode.className = TRnode.className === 'rowA' ? 'rowB' : 'rowA';
            };
          }
        }
      }
    }
    This script will toggle the class name of the TR tags between rowA and rowB.

  3. #3
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,277
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Content-Script-Type" content="text/javascript">
    <title>Example</title>
    
    <script type="text/javascript">
    
    
    </script>
    
    <style type="text/css">
    fieldset {padding:1ex; width:15em}
    label {display:block; text-align:left}
    label.highlight {background-color:#aaa}
    input {margin-right:1em}
    button {display:block; margin:auto}
    </style>
    
    <form action="some-script.pl">
    <fieldset>
    <legend>Example</legend>
    <label><input onclick="this.parentNode.className = this.checked ? 'highlight' : ''" type="checkbox">Foo</label>
    <button type="submit">Submit</button>
    </fieldset>
    </form>

  4. #4
    Join Date
    Dec 2006
    Posts
    3
    Here is the PHP code snippet from my script. Will these solutions work with it? I am a newbie to JavaScript.

    <div align="center">
    <center>
    <table class="tableoptions">
    <tr>
    <th>
    Dreprecated Atribute
    </th>
    <th>
    CSS Property-Value Pair
    </th>
    <th colspan="4">

    </th>
    </tr>
    <?php

    for ($i = 1; $i <= 250; $i++) {
    $options = $i + 9;
    $cost = $i + 259;
    if ($a_row[$options] > '') {
    ?>
    <tr bgColor="green" onClick="gregtest2()" >
    <td>
    <input type="checkbox" value="<?php $a_row[$options]|$a_row[$cost]; ?>" name="chkprice[]" >
    </td>
    <td class="options"><?php echo $a_row[$options]; ?>
    </td>
    <td align="right" width="60">$<?php echo $a_row[$cost]; ?>.00
    </td>
    <td width="20" valign="top"><input type="hidden" name="cost1" readonly=true value="<?php echo $a_row[$cost] ?>">
    </td>
    <?php
    }
    }

  5. #5
    Join Date
    Nov 2002
    Posts
    4,473
    Code:
    <style type="text/css">
    tr {
      color: #cc3333;
      background-color: white;
    }
    </style>
    <script type="text/javascript">
    function check(it) {
      tr = it.parentElement.parentElement;
      tr.style.backgroundColor = (it.checked) ? "gold" : "white";
    }
    </script>
    <form onsubmit="return false">
    <table border width=100%>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    </table>
    </form>

  6. #6
    Join Date
    Dec 2006
    Posts
    3
    Thanks....that worked!

    Can you call more than one JavaScript function from an onClick?

    Greg

  7. #7
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    Just as another way of doing the same thing:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
      <head>
        <title>Highlighting rows</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css" media="screen">
        <!--
        /* Background color of unhighlighted row */
        .rowA td {
          background-color: green;
        }
        
        /* Background color of row when highlighted */
        .rowB td {
          background-color: gold;
        }
        -->
        </style>
        
        <script type="text/javascript">
        <!-- begin hiding
        window.onload = function() {
          if (document.getElementsByTagName) {
            var inputs = document.getElementsByTagName('input');
            for (var i=0, end=inputs.length; i < end; i++) {
              if (inputs[i].className === 'toggleCheck') {
                inputs[i].onclick = function() {
                  var TRnode = this.parentNode;
                  while (TRnode.nodeName !== 'TR') {
                    TRnode = TRnode.parentNode;
                  }
                  TRnode.className = TRnode.className === 'rowA' ? 'rowB' : 'rowA';
                };
              }
            }
          }
        };
        // end hiding -->
        </script>
      </head>
      <body>
        <table class="tableoptions">
          <thead>
            <tr>
              <th colspan="2" id="th_options">Options</th>
              <th id="th_cost">Cost</th>
            </tr>
          </thead>
          <tbody>
            <?php for ($i = 1; $i <= 250; $i++):?>
            <?php
              $options = $i + 9;
              $cost = $i + 259;
            ?>
              <?php if ($a_row[$options] != ''):?>
                <tr class="rowA">
                  <td>
                    <input type="checkbox" class="toggleCheck" value="<?php $a_row[$options]|$a_row[$cost]; ?>" name="chkprice[]">
                    <input type="hidden" name="cost1" readonly value="<?php echo $a_row[$cost] ?>">
                  </td>
                  <td class="options" headers="th_options">
                    <?php echo $a_row[$options]; ?>
                  </td>
                  <td align="right" width="60" headers="th_cost">
                    $<?php echo $a_row[$cost]; ?>.00
                  </td>
                </tr>
              <?php endif;?>
            <?php endforeach;?>
          </tbody>
        </table>
      </body>
    </html>
    This method keeps you HTML a little cleaner if you create the onclick even handlers in the window's onload event. I also prettied up the PHP and fleshed out the markup for the table a little. You had some extra HTML tags you didn't need and was missing some tags that increase the accessibility of the table's data.

  8. #8
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

  9. #9
    Join Date
    Nov 2006
    Posts
    23
    gil davis
    Your code is not working in Mozilla.
    I wrote
    tr = it.parentNode.parentNode;
    It worked in Mozilla.
    Code:
     
    <style type="text/css">
    tr {
      color: #cc3333;
      background-color: white;
    }
    </style>
    <script type="text/javascript">
    function check(it) {
    var tr = it.parentNode.parentNode;
      tr.style.backgroundColor = (it.checked) ? "gold" : "white";
    }
    </script>
    <form onsubmit="return false">
    <table border=1 width=100%>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    <tr><td><input type="checkbox" onclick="check(this)"></td><td>testing!</td><td>testing!</td><td>testing!</td><td>testing!</td></tr>
    </table>
    </form>
    Last edited by ayse_incebulut; 03-02-2007 at 12:55 PM.

  10. #10
    Join Date
    Feb 2007
    Posts
    1

    Thumbs up

    Good job Gil !

    Just found this via a search.

  11. #11
    Join Date
    May 2004
    Location
    FL
    Posts
    3,453
    @ gil and ayse_incebulut

    Mind if I post that over on JavaScript Source? I would give you guys the credit and link to here.

  12. #12
    Join Date
    Nov 2002
    Posts
    4,473
    Quote Originally Posted by LeeU
    @ gil and ayse_incebulut

    Mind if I post that over on JavaScript Source? I would give you guys the credit and link to here.
    That is fine with me.

  13. #13
    Join Date
    Nov 2006
    Posts
    23
    LeeU
    Yes you can do that.

    "Created by ..."
    will be
    "Written by ..."
    Last edited by ayse_incebulut; 03-05-2007 at 04:09 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles