当输入为":focus"时,如何更改表行(tr)的背景颜色？

Question

我的HTML: <tr><td>Text</td><td><input type="text" value=""></td></tr>

我的CSS: input:focus tr{ background-color:#fff;}

我想在输入字段中写入文本时突出显示白色的行.我知道"tr"在"输入"之前,但是这可能以任何方式进行吗？

谢谢一堆

Answer 1

不,很遗憾.请参阅:活动子项父项的复杂CSS选择器

不过这是你怎么做的:http://jsfiddle.net/minitech/udzcp/

Answer 2

使用JQuery,这是非常可能的.注意:

HTML

<table border="1" cellpadding="20">
    <tr>
        <td>Text</td>
        <td height="50" width="100" id="somename"><input type="text" value="" id="mirza"></td>
    </tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td>a&nbsp;</td><td>1&nbsp;</td></tr>
    <tr><td>a&nbsp;</td><td>1&nbsp;</td></tr>
    <tr><td>a&nbsp;</td><td>1&nbsp;</td></tr>
    <tr><td>a&nbsp;</td><td>1&nbsp;</td></tr>
    <tr><td>a&nbsp;</td><td>1&nbsp;</td></tr>
</table>

CSS

.highlightedRow { background-color: orange; }

jQuery的

$('input').focus(function() {
    $(this).parent().parent().addClass('highlightedRow');
});

$('input').blur(function() {
    $(this).parent().parent().removeClass('highlightedRow');
});