Question

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

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

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

非常感谢

Answer 1

不，很遗憾。请参阅：Complex CSS selector for parent of active child

但是你可以这样做：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');
});

Answer 3

可悲的是，没有办法用CSS设置父元素的样式，所以你必须使用javascript。

Answer 4

这对于生成大量类似行（循环遍历大型数据集等）很有用：脚本：

function rowSet(data_id){
    document.getElementById('row_' + data_id).style.backgroundColor = 'blue';
}
function rowReset(data_id){
    document.getElementById('row_' + data_id).style.backgroundColor = '';
}

体：

<body>
    <form>
        <table>
            <tr id="row_#data_id#">
                <td><input name="input1_#data_id#" onFocus="rowSet(#data_id#);" onBlur="rowReset(#data_id#);"></td>
                <td><input name="input2_#data_id#" onFocus="rowSet(#data_id#);" onBlur="rowReset(#data_id#);"></td>
            </tr>
        </table>
    </form>
</body>

你也可以使用currentRow，或者你喜欢的任何东西。

Answer 5

这个jquery代码应该这样做：

$('input').focus(function() {
    $('tr').css("background-color", "#c00");
});

演示here

当输入为“：focus”时，如何更改表行（tr）的背景颜色？

5 个答案: