How to add row highlight using html, css, and javascript?

Question

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

Maybe you should get a javascript library, like mootools or jquery. — Oliver
– Oliver, Commented Oct 12, 2011 at 10:30

styrr · Accepted Answer · 2011-10-12 10:31:54Z

4

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

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

answered Oct 12, 2011 at 10:31

styrr

8294 silver badges9 bronze badges

Add a comment |

Tran Dinh Thoai · Accepted Answer · 2011-10-12 10:30:27Z

2

Please change your css code from:

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

to:

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

answered Oct 12, 2011 at 10:30

Tran Dinh Thoai

7021 gold badge7 silver badges21 bronze badges

Crap, great answer... now why didn't I think of that!?

Alex
– Alex

10/12/2011 10:32:10
Commented Oct 12, 2011 at 10:32

Add a comment |

Alex · Accepted Answer · 2011-10-12 10:31:01Z

1

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/

answered Oct 12, 2011 at 10:31

Alex

7,3461 gold badge20 silver badges31 bronze badges

Okay, ignore that, see Tran's answer

Alex
– Alex

10/12/2011 10:32:35
Commented Oct 12, 2011 at 10:32

Add a comment |

matino · Accepted Answer · 2011-10-12 10:31:57Z

1

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

tr:hover {
   background-color: #ccc;
}

answered Oct 12, 2011 at 10:31

matino

17.8k8 gold badges51 silver badges62 bronze badges

Add a comment |

Jan Pfeifer · Accepted Answer · 2011-10-12 10:32:11Z

1

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 = "";' ...

answered Oct 12, 2011 at 10:32

Jan Pfeifer

2,86130 silver badges37 bronze badges

Add a comment |

Gustav Barkefors · Accepted Answer · 2011-10-12 10:32:18Z

1

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

answered Oct 12, 2011 at 10:32

Gustav Barkefors

5,0861 gold badge28 silver badges30 bronze badges

Add a comment |

Nick · Accepted Answer · 2011-10-12 10:33:24Z

1

just change this

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

to

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

you are welcome

answered Oct 12, 2011 at 10:33

Nick

6029 silver badges22 bronze badges

Add a comment |

Gylfi · Accepted Answer · 2011-10-12 10:44:24Z

1

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.

answered Oct 12, 2011 at 10:44

Gylfi

113 bronze badges

Add a comment |

animuson · Accepted Answer · 2011-12-15 02:26:22Z

1

table.dataTable tr:hover
{
background-color:#f2e8da;
}

edited Dec 15, 2011 at 2:26

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

answered Oct 12, 2011 at 10:31

Ali Raza

1,2133 gold badges15 silver badges26 bronze badges

Add a comment |

Collectives™ on Stack Overflow

How to add row highlight using html, css, and javascript?

9 Answers 9

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Your Answer

Sign up or log in

Post as a guest

Related