关于设置html中表格颜色交替的问题
我想要的效果是：1.表格奇偶行颜色交替设置；2.选中某一行时，该行颜色发生变化；3.当鼠标进入该行时，该行高亮；当鼠标离开该行时，颜色变为原来设置的交替颜色。<htmlx...
我想要的效果是：1.表格奇偶行颜色交替设置；2.选中某一行时，该行颜色发生变化；3.当鼠标进入该行时，该行高亮；当鼠标离开该行时，颜色变为原来设置的交替颜色。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表格效果</title>
<style type="text/css">
.selected
{
background-color: blue;
}
.highlight
{
background-color: red;
}
.style1
{
width: 247px;
}
tr:nth-child(odd) {
background-color: white;
</style>
<script src="JS/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("tr").click(function () {
$(this).toggleClass("selected");
});
$("tr").hover(
function () { $(this).addClass("highlight"); },
function () { $(this).removeClass("highlight"); }
);
});
</script>
</head>
<body>
<div id="main">
<table border="1"；
style="height: 79px; width: 827px; background-color: #808080;" >
<tr>
<td>
12
</td>
<td>
12
</td>
<td >
12
</td>
</tr>
<tr>
<td>
12
</td>
<td>
12
</td>
<td >
12
</td>
</tr>
</table>
</div>
</body>
</html>
这样的确实现了表格的颜色交替，但是奇数行（颜色为白色），当我鼠标指上去的时候，它的颜色不会高亮，而偶数行就可以，而且，选定一行的时候。选定行会变为蓝色，奇数行也不可以，这是怎么回事？ 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表格效果</title>
<style type="text/css">
.selected
{
background-color: blue;
}
.highlight
{
background-color: red;
}
.style1
{
width: 247px;
}
tr:nth-child(odd) {
background-color: white;
</style>
<script src="JS/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("tr").click(function () {
$(this).toggleClass("selected");
});
$("tr").hover(
function () { $(this).addClass("highlight"); },
function () { $(this).removeClass("highlight"); }
);
});
</script>
</head>
<body>
<div id="main">
<table border="1"；
style="height: 79px; width: 827px; background-color: #808080;" >
<tr>
<td>
12
</td>
<td>
12
</td>
<td >
12
</td>
</tr>
<tr>
<td>
12
</td>
<td>
12
</td>
<td >
12
</td>
</tr>
</table>
</div>
</body>
</html>
这样的确实现了表格的颜色交替，但是奇数行（颜色为白色），当我鼠标指上去的时候，它的颜色不会高亮，而偶数行就可以，而且，选定一行的时候。选定行会变为蓝色，奇数行也不可以，这是怎么回事？ 展开
1个回答
展开全部
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表格效果</title>
<style type="text/css">
.highlight
{
background-color: red;
}
.selected
{
background-color: blue;
}
.style1
{
width: 247px;
}
.tr_w{background-color: white; }
.tr_g{background-color: #808080; }
</style>
<script src="JS/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("tr").click(function () {
$(this).toggleClass("selected");
});
$("tr").hover(
function () { $(this).removeClass("tr_g tr_w").addClass("highlight"); },
function () { if(!$(this).hasClass("selected")){table_tr();$(this).removeClass("highlight");} }
);
table_tr();
});
function table_tr(){
$("tr:odd").addClass("tr_g"); //先排除第一行,然后给奇数行添加样式
$("tr:even").addClass("tr_w"); //先排除第一行,然后给偶数行添加样式
}
</script>
</head>
<body>
<div id="main">
<table border="1"; style="height: 79px; width: 827px;" >
<tr>
<td>
12
</td>
<td>
12
</td>
<td >
12
</td>
</tr>
<tr>
<td>
12
</td>
<td>
12
</td>
<td >
12
</td>
</tr>
</table>
</div>
</body>
</html>
给你改了点样式，和修改了一点js代码
追问
我测试了下，如果选定两行，那么这两行应该都变成selected的颜色（蓝色），然后我再次点击了第2行，本来只有第2行取消selected的颜色（蓝色），但是第一行也取消了颜色。
还有就是，table_tr()这个函数里面，你写的那两行注释中，“先排除第一行”，这个怎么理解？如果我不是只有两行，而是有多行的话，这个怎么搞？
追答
<style type="text/css">
.tr_w{background-color: white; }
.tr_g{background-color: #808080; }
.highlight
{
background-color: red;
}
.selected
{
background-color: blue;
}
.style1
{
width: 247px;
}
</style>
<script src="JS/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("tr").click(function () {
$(this).toggleClass("selected");
});
$("tr").hover(
function () { if(!$(this).hasClass("selected")){$(this).addClass("highlight"); }},
function () { if(!$(this).hasClass("selected")){$(this).removeClass("highlight");} }
);
table_tr();
});
function table_tr(){
$("tr:odd").addClass("tr_g"); //给奇数行添加样式
$("tr:even").addClass("tr_w"); //给偶数行添加样式
}
</script>
把这段代码拿过去用就行了，css 样式位置调整了一下
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
