Html 更改<；tr>；当内部元素处于焦点时

我想在用户选择tr元素内的文本框时更改tr元素的颜色。focus伪类不能使用它。没有JavaScript可以实现这一点吗

html:

更新1:

---

看起来没有CSS唯一的方法。使用JavaScript最简单的方法是什么？

不，没有JavaScript不行。

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

编辑：

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

---

别忘了在CSS中添加类

tr.highlight

。请记住，jQuery将在未来的版本中放弃对旧浏览器的支持（请参阅），因此您必须在IE中使用jQuery1.x≤8.

刚刚要说：

在技术上，通过使用

tabindex

属性，例如

，可以在足够新的浏览器上使

tr

元素聚焦

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

标签

标记，作为可用性和可访问性的建议，例如

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

名称
​

---

…然后单击标签将焦点放在输入字段上（使用

标签
标记！），而不是行元素上。
如何使用：焦点在

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


因为选择的答案对我不起作用。
如果您在输入时使用此选项会很好：聚焦此选项会起作用是的，聚焦对输入效果很好，但我不想突出显示整行。@Aamir Rizwan这应该是CSS唯一解决方案的选择答案。有可能，有一个答案：嗯，聚焦在2012年不存在；）将解决方案包含在答案文本中，而不是外部链接中。或者，为了保存，复制外部链接的基本内容。
$("tr > td > input").focus(function(e){
    $(this).parent().parent().addClass('highlight');
}).blur(function(e){
    $(this).parent().parent().removeClass('highlight');
});

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

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

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