Cellule de tableau de surlignage JavaScript sur l'onglet dans le champ

Question

J'ai un site Web présenté dans des tableaux. (une forme d'hypothèque longue)

dans chaque cellule de tableau est un objet HTML. (zone de texte, boutons radio, etc)

Que puis-je faire lorsque chaque cellule de tableau est "tabulée" dans la cellule met en évidence un rouge très clair (ne pas être envahissant, mais dire à l'utilisateur où ils sont) ?

Answer 1

Voici le tableau que je teste mon code sur:

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

Voici le code qui a fonctionné:

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

Il y a probablement des choses ici, vous pouvez nettoyer, mais je fouetté cela ensemble rapidement. Cela fonctionne même s'il y a plusieurs choses dans chaque cellule. Ce serait beaucoup plus facile, cela devrait aller de soi, si vous utilisiez une bibliothèque pour vous aider dans ce travail - jQuery et MochiKit sont les deux que je préfère, bien qu'il y en ait d'autres qui fonctionnent aussi bien.

---

Entre le moment où je commence à écrire cette réponse et le temps je l'ai posté, quelqu'un a posté un code qui montre comment vous feriez quelque chose comme ça dans jQuery - comme vous pouvez le voir, beaucoup plus courte! Bien que j'aime les bibliothèques, je sais que certaines personnes ne peuvent ou ne veulent pas utiliser une bibliothèque - dans ce cas, mon code devrait faire l'affaire.

Answer 2

Peut-être:

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

Utilisez jQuery pour rendre votre vie plus facile, et vous pouvez faire quelque chose comme ceci:

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

Ceci est essentiellement à dire quand tout élément d'entrée dans votre table est en mise au point ajoutez la classe "highlight" à celle-ci, et une fois qu'elle perd le focus, supprimez la classe.

Configurez votre css:

input.highlight { background-color: red; } 

et vous devriez régler.