JavaScript выделяет ячейку таблицы на вкладке в поле

Question

У меня есть веб-сайт, выложенный в виде таблиц. (длинная ипотечная форма)

в каждой ячейке таблицы находится один объект HTML. (текстовое поле, переключатели и т. д.)

Что я могу сделать, когда каждая ячейка таблицы «вкладывается» в нее, подсвечивает ячейку очень светло-красным цветом (не навязчиво, а для пользователя, где он находится)?

Answer 1

Используйте jQuery, чтобы сделать вашу жизнь проще, и вы можете сделать что-то вроде этого:

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

Это в основном говорит, что когда любой элемент ввода в вашей таблице находится в фокусе, добавьте в него класс «highlight», а когда он потеряет фокус, удалите класс.

Настройте свой CSS как:

input.highlight { background-color: red; }

и вы должны быть установлены.

Answer 2

Это таблица, на которой я тестировал свой код:

<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 - как вы можете видеть, намного короче! Хотя я люблю библиотеки, я знаю, что некоторые люди либо не могут, либо не будут использовать библиотеку - в этих случаях мой код должен выполнять свою работу.

Answer 3

Возможно:

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