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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts

    Change row background color when clicked

    Hello,

    I need your help.

    I can't seem to figure out as to how I would go about changing a table rows background color when it is clicked.

    I'd like to add functionality to my existing html page to highlight (change the row color to #DFDFDF) when a row is selected.

    If another row is selected then, then return the row color to its initial color and apply the color the newly selected row.

    Note that when the top header is clicked, id like to exempt that row from ever changing color.

    Here is the fiddle: http://jsfiddle.net/q42L2/

    Much thanks and appreciation for all of your help

    Cheers,

    Jay

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I have the following code but some might consider it a little over-complicated:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Highlight Rows On Click</title>
    <style type="text/css">
        table {
            background-color: lightgreen;
        }
        #third {
            background-color: yellow;
        }
    </style>
    </head>
    <body>
    <!-- Demonstrating "Event Delegation" to highlight table' rows 
        on click.
        Arguments can be passed via the delegate. -->
    <table id="thetable" summary="highlight on click demo">
        <tr><th>Header</th><th>.. click does nothing</th></tr>
        <tr><td>Just one</td><td>.. no another</td></tr>
        <tr><td>Second</td><td>.. no another</td></tr>
        <tr id="third"><td>A third</td><td>.. no another</td></tr>
        <tr><td>Fourth for luck</td><td>.. no another</td></tr>
        <tr><td>Hey, a fifth!</td><td>.. one more</td></tr>
    </table>
    <script type="text/javascript">
    var addEvent = function (elem, eventType, func) {
        if ( elem.addEventListener )
            addEvent = function (elem, eventType, func) {
                elem.addEventListener(eventType, func, false);
            };
        else if ( elem.attachEvent )
            addEvent = function (elem, eventType, func) {
                elem.attachEvent('on' + eventType, func);
            };
        addEvent(elem, eventType, func);
    };
    var delegateEvent = function (elem, childElems, eventType, func, args) {
        addEvent(elem, eventType, function (e) {
            var evt = e || window.event;
            var elem = evt.target || evt.srcElement;
            if ( elem.nodeName.toLowerCase() == childElems.toLowerCase() ) {
                func(elem, args);
            }
        });
    };
    function highlightRow(obj, args) {
        if (highlightRow.previous) 
            highlightRow.previous.parentNode.style.background = highlightRow.prevColour;
        highlightRow.previous = obj;
        highlightRow.prevColour = obj.parentNode.style.backgroundColor;
        obj.parentNode.style.backgroundColor = args.colour;
    }
    
    function init() {
        delegateEvent(document.getElementById('thetable'), 'td', 'click',
                      highlightRow, {'colour': '#FDFDFD'});
    }
    addEvent(window, 'load', init);
    </script>
    </body>
    </html>
    But as you've included no JavaScript at all on your fiddle, this might not mean too much to you.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    jason_kelly (01-10-2013)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,370 Times in 4,335 Posts
    How about really simple. Something like this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    tr.normal td {
        color: black;
        background-color: white;
    }
    tr.highlighted td {
        color: white;
        background-color: black;
    }
    </style>
    </head>
    <body>
    <div id="results" class="scrollingdatagrid">
      <table id="mstrTable" cellspacing="0" border="1">
         <thead>
          <tr> 
            <th>File Number</th>
            <th>Date1</th>
            <th>Date2</th>
            <th>Status</th>
            <th>Num.</th>
          </tr>
        </thead>
        <tbody>
          <tr> 
            <td>KABC</td>
            <td>09/12/2002</td>
            <td>09/12/2002</td>
            <td>Submitted</td>
            <td>0</td>
    
          </tr>
          <tr> 
            <td>KCBS</td>
            <td>09/11/2002</td>
            <td>09/11/2002</td>
            <td>Lockdown</td>
            <td>2</td>
          </tr>
    
          <tr> 
            <td>WFLA</td>
            <td>09/11/2002</td>
            <td>09/11/2002</td>
            <td>Submitted</td>
            <td>1</td>
          </tr>
          <tr> 
            <td>WTSP</td>
            <td>09/15/2002</td>
            <td>09/15/2002</td>
            <td>In-Progress</td>
            <td>10</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <script type="text/javascript">
    (
      function( )
      {
          var trows = document.getElementById("mstrTable").rows;
     
          for ( var t = 1; t < trows.length; ++t )
          {
              trow = trows[t];
              trow.className = "normal";
              trow.onclick = highlightRow;
          }
    
          function highlightRow( )
          {
              for ( var t = 1; t < trows.length; ++t )
              {
                  trow = trows[t];
                  trow.className = ( trow == this ) ? "highlighted" : "normal";
              }
          }
      }
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    jason_kelly (01-10-2013)

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts
    Old Pendant....stunning and simply flawless!

    Works like a charm.

    What about, if the same row that is clicked on, can that be changed from black to white?

    Jay

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,370 Times in 4,335 Posts
    Sure. Trivial.

    Just change the highlightRow function. Rest all the same:
    Code:
          function highlightRow( )
          {
              for ( var t = 1; t < trows.length; ++t )
              {
                  trow = trows[t];
                  if ( trow != this ) trow.className = "normal";
              }
              this.className = ( this.className == "highlighted" ) ? "normal" : "highlighted";
          }
    See it? We always change all rows *except* the clicked-on one to "normal". Then we simply flip-flop the clicked-on row.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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