如何使用html、css和javascript添加行高亮显示？_Javascript_Html_Css

如何使用html、css和javascript添加行高亮显示？

javascript html css

如何使用html、css和javascript添加行高亮显示？,javascript,html,css,Javascript,Html,Css,我想知道如何使用html、css和javascript突出显示行这是我的密码： people.html <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body> <div> <div width="100%">

我想知道如何使用html、css和javascript突出显示行

这是我的密码：

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>

请从以下位置更改css代码：

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

致：

请从以下位置更改css代码：

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

致：

您最好的选择是使用jQuery进行此操作。tr元素不能以这种方式应用样式。背景色仅适用于行中的所有td元素：

您的最佳选择是使用jQuery进行此操作。tr元素不能以这种方式应用样式。背景色仅适用于行中的所有td元素：

有一个非常简单的css专用解决方案

如果不需要IE6/7功能，可以使用CSS:hover：

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

如果不需要IE6/7功能，可以使用CSS:hover：

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

只需在css样式表中添加以下内容

.highlight {
   background-color: red;
 }

或

或仅由JS提供

<tr onmouseover='this.style.backgroundColor = "red";' onmouseout='this.style.backgroundColor = "";' ...

只需在css样式表中添加以下内容

.highlight {
   background-color: red;
 }

或

或仅由JS提供

<tr onmouseover='this.style.backgroundColor = "red";' onmouseout='this.style.backgroundColor = "";' ...

我会使用CSS：hover
伪类来实现这一点。从HTML中删除onMouseXXX
属性，从table.dataTable td
中删除background color
，并添加CSS规则
table.dataTable tr:hover {
    background-color: #8888ff;
}

我将使用CSS：hover
伪类来实现这一点。从HTML中删除onMouseXXX
属性，从table.dataTable td
中删除background color
，并添加CSS规则
table.dataTable tr:hover {
    background-color: #8888ff;
}

改变这个
table.dataTable tr.highlight {
background-color: #8888ff;
}

到
不客气
只要改变这个
table.dataTable tr.highlight {
background-color: #8888ff;
}

到
欢迎您更换此：
table.dataTable tr.highlight {
 background-color: #8888ff;
}

table.dataTable tr.normal {
 background-color: #ffffff;
}

与：
这也将使您不需要这些高光和普通类。
替换此：
table.dataTable tr.highlight {
 background-color: #8888ff;
}

table.dataTable tr.normal {
 background-color: #ffffff;
}

与：
这也将使您不需要那些突出显示和普通类。
也许您应该获得一个javascript库，如mootools或jquery。也许您应该获得一个javascript库，如mootools或jquery。废话，回答得很好。。。为什么我没想到呢！？废话，很好的回答。。。为什么我没想到呢！？好的，忽略这个，看Tran的回答好的，忽略这个，看Tran的回答