How to add row highlight using html, css, and javascript?
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;
开发者_StackOverflow社区 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;
}
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;
}
Your best choice is to use jQuery for this. The tr element cannot have a style applied to it in that way. The background color would only work for all td elements in the row:
http://jsfiddle.net/ahallicks/K2N7j/1/
You could use CSS :hover if you don't need IE6/7 functionality:
tr:hover {
background-color: #ccc;
}
Just add following to you css stylesheet
.highlight {
background-color: red;
}
or
.dataTable tr:hover {
background-color: red;
}
or by JS only
<tr onmouseover='this.style.backgroundColor = "red";' onmouseout='this.style.backgroundColor = "";' ...
I would use the CSS :hover pseudoclass for this. Remove the onMouseXXX attributes from your HTML, remove background-color from table.dataTable td and add the CSS rule
table.dataTable tr:hover {
background-color: #8888ff;
}
just change this
table.dataTable tr.highlight {
background-color: #8888ff;
}
to
table.dataTable tr.highlight td {
background-color: #8888ff;
}
you are welcome
Replace this:
table.dataTable tr.highlight {
background-color: #8888ff;
}
table.dataTable tr.normal {
background-color: #ffffff;
}
With:
table.dataTable tr:hover td{
background-color: #8888ff;
}
This will also make it so that you do not need those highlight and normal classes.
table.dataTable tr:hover
{
background-color:#f2e8da;
}
加载中,请稍侯......
精彩评论