Css 当输入为“时，如何更改表格行（tr）的背景色：焦点；？

我的HTML：

Text

我的CSS：

input:focustr{背景色：#fff；}

在输入字段中写入文本时，我希望以白色突出显示该行。我知道“tr”在“input”之前，但这有可能吗

---

非常感谢，遗憾的是，没有办法用CSS设置父元素的样式，因此您必须使用javascript。

不，遗憾的是。见：

---

不过，这里有一些方法可以做到这一点：

jquery代码应该做到这一点：

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

---

演示

这对于生成大量类似行（在大型数据集中循环等）非常有用： 脚本：

正文：

---

您也可以使用currentRow，或者任何您喜欢的工具。

使用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>

Jquery

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

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

---

非常感谢您的链接！你刚才为我节省了很多时间哦，顺便说一句，我编辑了我的帖子，其中包含了一个关于如何使用JavaScript的示例。请参阅：当选择一行时，该代码将高亮显示所有行，而不仅仅是输入元素的父元素，并且在模糊后不会取消高亮显示该行。

<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>

.highlightedRow { background-color: orange; }

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

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