Zmień kolor <tr>, gdy element wewnątrz jest ostry.

Question

Chcę zmienić kolor elementu tr, gdy użytkownik wybierze pole tekstowe wewnątrz niego. Pseudo-klasa fokusowa nie działa z tym. Czy można to osiągnąć bez JavaScript?

html:

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

CSS:

tr:focus 
{ 
    background:yellow; 
}​ 

Update1:
Wygląda na to, że nie jest jedyną metodą CSS. Jaki jest najłatwiejszy sposób na to, używając JavaScript?

Answer 1

Nie. Nie ma selektora tematycznego w CSS3, jednak będzie on dostępny w CSS4.

EDIT:

Czysty roztwór JavaScript może być

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

Jednak to nie będzie działać w IE ≤ 7, jak versons przed 8 nie wiem document.querySelectorAll (demonstration). Jeśli chcesz rozwiązanie beztroski cross-przeglądarki można użyć jQuery i następujący kod (demonstration):

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

Nie zapomnij dodać klasę tr.highlight do swojego CSS. Należy pamiętać, że jQuery spadnie poparcie starych przeglądarek w przyszłych wydaniach (patrz Browser Support), więc będziesz musiał użyć jQuery 1.x dla IE ≤ 8.

Answer 2

Nie, nie można bez JavaScript.

Answer 3

chodziło tylko o stwierdzenie, że: http://jsfiddle.net/qHmGe/

Answer 4

Jest technicznie możliwe, aby ustawić element tr, w wystarczająco nowych przeglądarkach, używając atrybutu tabindex, np. <tr tabindex="1">.

Jednak metoda ustawiania ostrości jest zależna od przeglądarki, a wiersze tabeli z możliwością ustawiania ostrości mogą być koszmarem użyteczności. Na przykład, zarówno w IE, jak i Firefox, wiersz jest skupiony na tym, kiedy klucz TAB jest używany odpowiednio, ale wiersz skupiony nie bierze wejścia. Aby przejść do pola wprowadzania danych, należy ponownie nacisnąć TAB. W przeglądarce Firefox, ale nie w IE, wiersz można również skoncentrować, klikając, ale nie klikając na pole wejściowe (ponieważ to skupi się na tym polu). Jeśli używasz znaczników label, zalecanych pod kątem użyteczności i ułatwień dostępu, np.

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

... następnie klikając na etykiecie koncentruje się na polu wejściowym (jednym z powodów używania label znaczników!), A nie na elemencie wiersza.