How to add row highlight using html, css, and javascript? - Stack Overflow|Programmer puzzle solving

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

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 edited Oct 12, 2011 at 10:35 JJJ 33.2k20 gold badges94 silver badges103 bronze badges asked Oct 12, 2011 at 10:25 NinjaBoy 3,75519 gold badges57 silver badges69 bronze badges

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

Add a ment |

9 Answers 9

Sorted by: Reset to default 4

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

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

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

you are wele

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

Programmer puzzle solving

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

9 Answers 9

Articles related to this article

comment list (0)