每当聚焦“输入”时改变“tr”样式？答案

【问题标题】：changing `tr` style whenever an `input` was focused?每当聚焦“输入”时改变“tr”样式？
【发布时间】：2011-08-05 21:13:37
【问题描述】：

我有以下 html：

<table id="TableNewUser" runat="server" width="50%" cellpadding="3" cellspacing="1"
border="0">
<tr>
    <th colspan="2">
        New User
    </th>
</tr>
<tr>
    <td width="50%" align="right">
        <asp:TextBox ID="TextBoxUsername" runat="server" Style="direction: rtl;" MaxLength="25"></asp:TextBox>
    </td>
    <td align="left" width="50%">
        UserName
    </td>
</tr>
<tr>
    <td align="right">
        <asp:TextBox ID="TextBoxPass" runat="server" MaxLength="25"></asp:TextBox>
    </td>
    <td align="left">
        Password :
    </td>
</tr>
<tr>
    <td colspan="2">
        <asp:Button ID="ButtonSubmit" runat="server" Text="Submit" OnClick="ButtonSubmitClick" />
    </td>
</tr>
</table>

我想在文本框获得焦点时更改 tr 样式。
我使用了下面的 CSS 代码，但它不起作用。

input[type="text"]:focus tr
{
    background-color: #e7e7e7;
}

你能指导我吗？

【问题讨论】：

为什么这被否决了？似乎是一个有效的问题。
赞成，因为这似乎是一个有效的问题，没有人给出反对的理由。
只是碰巧看了我的代表，我不记得最近投了反对票，我一定是点击错误或点击了制表符和空格之类的东西。对此深表歉意。

标签： html css input background-color

【解决方案1】：

正如失望先生所说，你必须使用 JavaScript（或 jquery）来实现你想要的。

我编写了一个非常简单的 HTML 页面来举例说明：

<html>
<head>
<script type="text/javascript">
function changeTrStyle()
{
document.getElementById("trId").style.background = "red";
}
</script>
</head>
<body>
<table>
    <tr id="trId">
        <td>
            <input type="text" onfocus="changeTrStyle()"/>
        </td>
    </tr>
</table>
</body>
</html>

如果你聚焦文本框，tr 背景会变成红色。

注意：已在 Safari 和 Chrome 上测试。

【讨论】：