我有一个摆在桌子上的网站。 (长期抵押表格)

每个表格单元格中都有一个HTML对象。 (文本框，单选按钮等)

当每个表单元格都被"标签"到其中时，该怎么办呢？该单元格以非常浅的红色突出显示(不要太夸张，而是告诉用户它们在哪里)？

解决方案

可能：

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

使用jQuery使生活更轻松，并且我们可以执行以下操作：

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

这就是说，当表中的任何输入元素都处于焦点下时，向其添加"突出显示"类，一旦失去焦点，则删除该类。

将CSS设置为：

input.highlight { background-color: red; }

并且你应该被设置。

这是我测试代码的表：

<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 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;
      });
    }
  }
});

我们可能需要清理这里的东西，但是我很快就将其联系在一起。即使每个单元中有多个事物，此方法也有效。

如果我们使用了一个库来协助我们完成这项工作，这将容易得多，不用说了，尽管我喜欢使用jQuery和MochiKit，但还有其他一些也可以使用。

从我开始写这个答案到我发布它的时间之间，有人发布了代码，该代码可以显示我们将如何在jQuery中执行类似的操作，简而言之！尽管我喜欢图书馆，但我知道有些人不能或者不会使用图书馆，在这种情况下，我的代码可以完成这项工作。