<tr>改变颜色当元素里面焦点

我想改变tr元素的颜色，当用户选择一个文本框在里面。焦点伪类不适用于它。 ~~这可以在没有JavaScript的情况下实现吗？~~<tr>改变颜色当元素里面焦点

HTML：

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

CSS：

tr:focus 
{ 
    background:yellow; 
}

UPDATE1：
貌似没有CSS唯一方法。使用JavaScript来做这件事最简单的方法是什么？

来源

2012-04-15 Aamir Rizwan

这将是很好，如果你使用这个输入：焦点这将工作 – Jack 2012-04-15 08:11:58

是的，焦点给输入很好的效果，但我不想突出整行。 – 2012-04-15 08:32:26

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

EDIT：

甲纯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工作，因为versons 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'); 
});

不要忘了一类tr.highlight添加到您的CSS。请记住，jQuery将下降支持旧的浏览器在将来的版本（见Browser Support），所以你必须使用jQuery 1.x中的IE 8 ≤

来源

2012-04-15 08:06:39 Zeta

谢谢。很棒。 – 2012-04-15 09:27:58

不，你不能没有JavaScript。

来源

2012-04-15 08:06:29 ezakto

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

来源

2012-04-15 09:10:33

在技术上可以通过在其上使用tabindex属性在一个足够新的浏览器上创建一个tr元素，例如<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标记之一！），而不是排元素。

来源

2012-04-15 11:01:59

<tr>改变颜色当元素里面焦点

回答

相关问题