<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//隔行变色
$(function(){
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
//点击变色
$("td").click( function () {
$(this).addClass("selected");
});
//光标移入移出变色
$("td").mouseover(function(){
$(this).addClass("hd");
}).mouseout(function(){
$(this).removeClass("hd");
});
});
</script>
<style>
.even{
background-color:red;
}
.odd{
background-color:blue;
}
.selected{
background-color:fuchsia;
}
.hd{
background-color:yellow;
}
</style>
<body>
<table border="1" width="100%">
<tr>
<td>书名</td>
<td>作者</td>
<td>点击量</td>
</tr>
<tr>
<td>圣墟</td>
<td>辰东</td>
<td>10万</td>
</tr>
<tr>
<td>飞剑问道</td>
<td>我吃西红柿</td>
<td>11万</td>
</tr>
<tr>
<td>杀神</td>
<td>逆苍天</td>
<td>22万</td>
</tr>
<tr>
<td>龙王传说</td>
<td>唐家三少</td>
<td>18万</td>
</tr>
<tr>
<td>斗破苍穹</td>
<td>天蚕拖豆</td>
<td>1万</td>
</tr>
</table>
</body>
</html>
