Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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;
}
share|improve this question
1  
Maybe you should get a javascript library, like mootools or jquery. – Oliver Oct 12 '11 at 10:30

9 Answers

up vote 2 down vote accepted

Please change your css code from:

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

to:

table.dataTable tr.highlight td {
background-color: #8888ff;
}
share|improve this answer
Crap, great answer... now why didn't I think of that!? – Alex Oct 12 '11 at 10:32
up vote 3 down vote

There is an css only solution which is very simple. Example.

tr:hover { background-color: #8888ff }
share|improve this answer
up vote 1 down vote

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/

share|improve this answer
Okay, ignore that, see Tran's answer – Alex Oct 12 '11 at 10:32
up vote 1 down vote

You could use CSS :hover if you don't need IE6/7 functionality: 

tr:hover {
   background-color: #ccc;
}
share|improve this answer
1  
It works even on IE7 if you specify a correct doctype. – Juhana Oct 12 '11 at 10:34
up vote 1 down vote

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 = "";' ...
share|improve this answer
up vote 1 down vote

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;
}
share|improve this answer
up vote 1 down vote

just change this

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

to

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

you are welcome

share|improve this answer
up vote 1 down vote

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.

share|improve this answer
up vote 1 down vote 
table.dataTable tr:hover
{
background-color:#f2e8da;
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.