每当“input”聚焦时改变“tr”样式？

发布于 2024-11-01 18:49:38 字数 1089 浏览 0 评论 0原文

我有以下 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;
}

你能指导一下吗？

原文

I have the following 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>

I wanna change the tr style whenever the text-boxes are focused.
I've used below CSS code but it doesn't work.

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

Could you please guide me?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜未央樱花落 2024-11-08 18:49:38

正如失望先生所说，你必须使用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 上测试。

As Mr. Dissappointment stated, you must use JavaScript (or jquery) to achieve what you want.

I coded a very simple HTML page to exemplify:

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

If you focus the textbox, the tr background will become red.

Note: Tested on Safari and Chrome.

回复收藏 0 原文

~没有更多了~