Menu
I want to know how I can make a row highlight using html, css, and javascript.
Here are my codes:
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>
and my css:
stylesheet.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;
}
652
There is an css only solution which is very simple. Example.
tr:hover { background-color: #8888ff }
Please change your css code from:
table.dataTable tr.highlight {
background-color: #8888ff;
}
to:
table.dataTable tr.highlight td {
background-color: #8888ff;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
