最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

html - JavaScript highlight table cell on tab in field - Stack Overflow

programmeradmin4浏览0评论

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)?

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)?

Share Improve this question asked Sep 29, 2008 at 20:53 JasonJason
Add a ment  | 

3 Answers 3

Reset to default 5

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.

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 patible 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.

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>
发布评论

评论列表(0)

  1. 暂无评论