Changer la couleur de <tr> lors de l'élément à l'intérieur qui est dans le champ

Je veux changer la couleur de l'élément tr lorsque l'utilisateur de sélectionner une zone de texte à l'intérieur. L'accent pseudo-classe est de ne pas travailler avec elle. cela Peut-il être atteint sans JavaScript ?

html:

<table>
<tr>
    <td>Name</td><td><input type="text" name="name"></td>
</tr>
</table>​

CSS:

tr:focus
{
    background:yellow;
}​

Update1:

Regarde comme il n'y a pas de CSS seule méthode. Quelle est la meilleure façon de le faire à l'aide de JavaScript ?

  • Il serait bien si vous utilisez cette entrée:focus cela fonctionne
  • Oui, l'accent donne bel effet avec entrée, mais je wan't pour mettre en surbrillance la ligne entière.
InformationsquelleAutor Aamir Rizwan | 2012-04-15
  1. 7

    Pas. Il n'y a pas de sujet sélecteur CSS3, il y en aura dans CSS4 bien.

    MODIFIER:

    Un pur JavaScript solution pourrait être

    var i;
var inputs = document.querySelectorAll("tr > td > input");
for(i = 0; i < inputs.length; ++i){
    inputs[i].addEventListener('focus',function(e){
        this.parentNode.parentNode.className += ' highlight';        
    });
    inputs[i].addEventListener('blur',function(e){
        this.parentNode.parentNode.className = this.parentNode.parentNode.className.replace(/\s*highlight\s*/ig,' ');
    });
}

    Toutefois, cela ne fonctionne pas dans IE≤7, versions avant 8 ne sais pas document.querySelectorAll (démonstration). Si vous souhaitez un soin sans solution de navigateur vous pouvez utiliser jQuery et le code suivant (démonstration):

    $("tr > td > input").focus(function(e){
    $(this).parent().parent().addClass('highlight');
}).blur(function(e){
    $(this).parent().parent().removeClass('highlight');
});

    N'oubliez pas d'ajouter une classe tr.highlight à votre CSS. Gardez à l'esprit que jQuery va baisser de support des vieux navigateurs dans les futures versions (voir Prise En Charge Du Navigateur), de sorte que vous aurez à utiliser jQuery 1.x pour IE ≤8.

    • Merci. Fonctionne très bien.
    InformationsquelleAutor Zeta
  2. 2

    Il est techniquement possible de faire un tr élément peut recevoir le focus, sur suffisamment de nouveaux navigateurs, à l'aide d'un tabindex attribut, par exemple <tr tabindex="1">.

    Cependant, la méthode de mise au point est le navigateur-dépendante, et peut recevoir le focus lignes de la table peut être une convivialité cauchemar. Par exemple, à la fois sur IE et sur Firefox, la ligne est concentré sur quand la touche de TABULATION est utilisé convenablement, mais un concentré de ligne ne pas prendre d'entrée. L'utilisation serait nécessaire de cliquer sur l'ONGLET de nouveau pour entrer dans le champ de saisie. Sur Firefox mais pas sur IE, la ligne peut également être porté en cliquant sur, mais pas en cliquant sur le champ de saisie (parce que ce serait se concentrer sur ce domaine). Si vous utilisez label de balisage, comme recommandable pour l'ergonomie et l'accessibilité, par exemple

    <table>
<tr tabindex="1">
    <td><label for="name">Name</label></td>
    <td><input type="text" name="name" id="name"></td>
</tr>
</table>​

    ... puis en cliquant sur le label se concentre sur le champ de saisie (l'une des raisons pour l'utilisation de label balisage!), pas sur l'élément de ligne.

    InformationsquelleAutor Jukka K. Korpela
  3. 1

    Non, vous ne pouvez pas sans JavaScript.

    InformationsquelleAutor ezakto
  5. 1

    Que penser de l'utilisation :focus-au sein de...

    <table>
  <tr>
    <td>Name</td>
    <td><input type="text" name="name"></td>
  </tr>
</table>​

    CSS:

    tr:focus-within {
  background:yellow;
  }​

    Violon

    Ce qui m'a aidé. Que la réponse choisie n'a pas de travail pour moi.

    InformationsquelleAutor serverjohn