Ändern Sie die Farbe der <tr> when-element innen im Fokus

Möchte ich ändern die Farbe des tr-Elements, wenn der Benutzer wählen Sie ein Textfeld drin. Der Fokus pseudo-Klasse nicht mit ihm arbeiten. Kann das erreicht werden ohne JavaScript ?

html:

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

CSS:

tr:focus
{
    background:yellow;
}

Update1:

Sieht aus wie es ist nicht nur CSS-Methode. Was ist der einfachste Weg, dies zu tun, mit JavaScript ?

Es wäre schön, wenn Sie diese auf input:focus, das wird funktionieren
Ja, Fokus gibt schöne Wirkung mit input, aber ich wan ' T, um markieren der ganzen Zeile.

InformationsquelleAutor Aamir Rizwan | 2012-04-15

css html

Nicht. Es gibt kein Thema-Selektor in CSS3, gibt es ein in CSS4 obwohl.

BEARBEITEN:

Eine Reine JavaScript-Lösung könnte sein,

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

Jedoch funktioniert es nicht im IE≤7, als versons vor 8 weiß nicht Dokument.querySelectorAll (demonstration). Wenn Sie möchten, eine care-free cross-browser-Lösung, die Sie nutzen könnten jQuery und den folgenden code (demonstration):

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

Vergessen Sie nicht, fügen Sie eine Klasse tr.highlight zu deinem CSS. Beachten Sie, dass jQuery drop-Unterstützung für alte Browser in zukünftigen Versionen (siehe Browser-Unterstützung), so müssen Sie die jQuery-1.x für IE ≤8.

Danke. Funktioniert Super.

InformationsquelleAutor Zeta

2

Ist es technisch möglich, eine tr Isoliertes element, auf ausreichend neue Browser, indem eine tabindex - Attribut, z.B. <tr tabindex="1">.

Jedoch die Methode der Konzentration ist browser-abhängig, und justierbares Tabelle-Zeilen kann ein usability-Albtraum. Zum Beispiel, sowohl auf IE und auf Firefox, die Reihe konzentriert sich auf, wenn Sie die TAB-Taste verwendet wird, geeignet, aber eine fokussierte Zeile ist keine Eingabe. Die Nutzung würde zu treffen müssen Sie TAB erneut, um das Eingabefeld. Auf Firefox, aber nicht IE, die Zeile kann auch fokussiert werden, indem Sie, wenn auch nicht durch klicken in das Eingabefeld (da sonst Fokus auf das Feld). Wenn Sie label markup, als empfehlenswert für usability und Barrierefreiheit, z.B.
```
<table>
<tr tabindex="1">
    <td><label for="name">Name</label></td>
    <td><input type="text" name="name" id="name"></td>
</tr>
</table>
```
... dann Klick auf das label konzentriert sich auf das input-Feld (einer der Gründe für die Verwendung von label markup!), nicht auf das row-element.

InformationsquelleAutor Jukka K. Korpela
1

Nein, Sie können nicht ohne JavaScript.

InformationsquelleAutor ezakto
1

War nur um zu sagen, dass: http://jsfiddle.net/qHmGe/

InformationsquelleAutor Claude Vedovini

Was mit :focus-in...

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

CSS:

tr:focus-within {
  background:yellow;
  }