<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/gehangbianse.css"/>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//隔行变色
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
//点击变色
$("tr").click(function(){
$(this).css("background","burlywood").siblings().css("background","");
});
//滑动变色
$("tr").mouseover(function (){
$(this).addClass("se");
}).mouseout(function (){
$(this).removeClass("se");
});
});
</script>
</head>
<body>
<table id="table">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>赵六</td>
<td>20</td>
<td>男</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/gehangbianse.css"/>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//隔行变色
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
//点击变色
$("tr").click(function(){
$(this).css("background","burlywood").siblings().css("background","");
});
//滑动变色
$("tr").mouseover(function (){
$(this).addClass("se");
}).mouseout(function (){
$(this).removeClass("se");
});
});
</script>
</head>
<body>
<table id="table">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>赵六</td>
<td>20</td>
<td>男</td>
</tr>
</table>
</body>
</html>
*{
margin: 0px auto;
padding: 0px;
}
#table{
width: 200px;
height: 300px;
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
td{
border: 1px solid black;
}
.even{
background-color:pink;
}
.odd{
background-color:#33cc99;
}
.selected{
background-color:black;
}
.se{
background-color:#666;
}