JavaScript highlight table cell on tab in field

Question

Hi All,

I have a website laid out in tables. (a long mortgage form)

in each table cell is one HTML object. (text box, radio buttons, etc)

What can I do so when each table cell is "tabbed" into it highlights the cell with a very light red (not to be obtrusive, but tell the user where they are)?

Answer 1

Possibly:

<script type="text/javascript">
//getParent(startElement,"tagName");
function getParent(elm,tN){
  var parElm = elm.parentNode;
  while(parElm.tagName.toLowerCase() != tN.toLowerCase())
    parElm = parElm.parentNode;
  return parElm;
}
</script>

<tr><td><input type="..." onfocus="getParent(this,'td').style.backgroundColor='#400';" onblur="getParent(this,'td').style.backgroundColor='';"></td></tr>

Answer 2

Use jQuery to make your life easier, and you can do something like this:

$('#mytableid input').focus( function() { 
    $(this).addClass('highlight'); 
}).blur( function() {
    $(this).removeClass('highlight'); 
});

This is basically saying when any input element in your table is under focus add the "highlight" class to it, and once it loses focus remove the class.

Setup your css as:

input.highlight { background-color: red; }

and you should be set.

Answer 3

This is the table I tested my code on:

<table id="myTable">
  <tr>
    <td><input type="text" value="hello" /></td>
    <td><input type="checkbox" name="foo" value="2" /></td>
    <td><input type="button" value="hi" /></td>
  </tr>
</table>

Here is the code that worked:

// here is a cross-browser compatible way of connecting 
// handlers to events, in case you don't have one
function attachEventHandler(element, eventToHandle, eventHandler) {
    if(element.attachEvent) {
       element.attachEvent(eventToHandle, eventHandler);
    } else if(element.addEventListener) {
       element.addEventListener(eventToHandle.replace("on", ""), eventHandler, false);
    } else {
    element[eventToHandle] = eventHandler;
  }
}
attachEventHandler(window, "onload", function() {
  var myTable = document.getElementById("myTable");
  var myTableCells = myTable.getElementsByTagName("td");
  for(var cellIndex = 0; cellIndex < myTableCells.length; cellIndex++) {
    var currentTableCell = myTableCells[cellIndex];
    var originalBackgroundColor = currentTableCell.style.backgroundColor;
    for(var childIndex = 0; childIndex < currentTableCell.childNodes.length; childIndex++) {
      var currentChildNode = currentTableCell.childNodes[childIndex];
      attachEventHandler(currentChildNode, "onfocus", function(e) {
        (e.srcElement || e.target).parentNode.style.backgroundColor = "red";
      });
      attachEventHandler(currentChildNode, "onblur", function(e) {
        (e.srcElement || e.target).parentNode.style.backgroundColor = originalBackgroundColor;
      });
    }
  }
});

There are probably things here you could clean up, but I whipped this together quickly. This works even if there are multiple things in each cell.

This would be much easier, it should go without saying, if you used a library to assist you in this work - jQuery and MochiKit are the two I favor, though there are others that would work just as well.

---

Between the time I started writing this answer and the time I posted it, someone posted code that shows how you would do something like this in jQuery - as you can see, much shorter! Although I love libraries, I know some people either can't or will not use a library - in those cases my code should do the job.