Change row background color when clicked

jason_kelly · 01-09-2013, 06:56 PM

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

AndrewGSW · 01-09-2013, 07:31 PM

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.

Old Pedant · 01-09-2013, 08:23 PM

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>

jason_kelly · 01-10-2013, 06:28 PM

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

Old Pedant · 01-10-2013, 07:29 PM

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.