更改内部元素聚焦时的颜色

Question

当用户在其中选择一个文本框时，我想更改tr元素的颜色。焦点伪类没有使用它。 这可以在没有JavaScript的情况下实现吗？

HTML：

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

CSS：

tr:focus
{
    background:yellow;
}​

UPDATE1：
看起来没有CSS only方法。使用JavaScript执行此操作的最简单方法是什么？

Answer 1

没有。 CSS3中没有主题选择器，但CSS4中会有一个主题选择器。

修改：

纯JavaScript解决方案可能是

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

然而，这在IE≤7中不起作用，因为之前的8个经文不知道document.querySelectorAll（demonstration）。如果您想要一个免费的跨浏览器解决方案，您可以使用jQuery和以下代码（demonstration）：

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

不要忘记在CSS中添加一个类tr.highlight。请记住，jQuery将在以后的版本中放弃对旧浏览器的支持（请参阅Browser Support），因此您必须使用jQuery 1.x forIE≤8。

Answer 2

技术上可以通过在其上使用tr属性，在足够新的浏览器上使tabindex元素具有焦点，例如<tr tabindex="1">。

然而，聚焦方法依赖于浏览器，可聚焦的表行可能是可用性的噩梦。例如，在IE和Firefox上，当适当使用TAB键时，该行将关注，但焦点行不接受输入。使用需要再次点击TAB才能进入输入字段。在Firefox上，但不是在IE上，也可以通过单击来关注行，但不是通过单击输入字段（因为那将集中在该字段上）。如果您使用label标记，则建议使用可用性和可访问性，例如

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

...然后单击标签将重点放在输入字段上（使用label标记的原因之一！），而不是行元素。

Answer 3

不，没有JavaScript，你就不能。

Answer 4

刚刚说：http://jsfiddle.net/qHmGe/

Answer 5

What about using :focus-within...

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

CSS:

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

Fiddle

What helped me. As the chosen answer did not work for me.