How to add row highlight using html, css, and javascript?_问答_开发者

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

开发者 https://www.devze.com 2023-04-12 23:36 出处：网络

I want to know how I can make a row highlight using html, css, and javascript. Here are my codes: people.html

相关专题：css 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;
 }

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

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

精彩评论

关注公众号

热门标签

图文推荐

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

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：