gpt4 book ai didi

javascript - 如何使用 html、css 和 javascript 添加行突出显示?

转载 作者:行者123 更新时间:2023-11-28 04:01:46 26 4
gpt4 key购买 nike

我想知道如何使用 html、css 和 javascript 使行突出显示。

这是我的代码:

people.html

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />

</head>

<body>

<div>
<div width="100%">
<input type="text" id="searchCompGroupUser" name="searchCompGroupUser" size="100%"/>
<input type="submit" id="searchCompGroupUser" name="searchCompGroupUser" value="Search"/>
<input type="checkbox" id="isActive" name="isActive" checked="checked" />
</div>

<table class="dataTable">
<tr>
<th width="40%">Name</th>
<th width="60%">Address</th>
<tr>

<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
<td>Tony</td>
<td>United States of America</td>
</tr>

<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
<td>Toby</td>
<td>United Arab Emirates</td>
</tr>
</table>

<div class="controls">
<input type="submit" id="btnAdd" name="btnAdd" value="ADD" onclick="" />
<input type="submit" id="btnEdit" name="btnEdit" value="EDIT" onclick="" />
</div>
</div>
</body>
</html>

和我的CSS:

样式表.css

table.dataTable {
width: 100%;
margin-top: 10px;
font-family: verdana,arial,sans-serif;
font-size:12px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}

table.dataTable tr.highlight {
background-color: #8888ff;
}

table.dataTable tr.normal {
background-color: #ffffff;
}

table.dataTable th {
white-space: nowrap;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}

table.dataTable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}

.controls {
margin-top: 10px;
float: right;
}

最佳答案

有一个非常简单的纯 css 解决方案。 Example .

tr:hover { background-color: #8888ff }

关于javascript - 如何使用 html、css 和 javascript 添加行突出显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7738610/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com