www.webdeveloper.com
Results 1 to 13 of 13

Thread: Toggle row color when Checkbox is checked/unchecked

Hybrid View

  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,773
    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,270
    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>
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  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,773
    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,773

  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 11:55 AM.

  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,447
    @ gil and ayse_incebulut

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

    ""Men occasionally stumble over the truth, but most of them pick themselves up and hurry off as if nothing ever happened."" -- Sir Winston Churchill

  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 03: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