<html>
<head>
<title>表格奇偶行样式</title>
<!--导入jQuery库-->
<script type="text/javascript" src="jquery-1.11.3.min.js""></script>
<style type="text/css">
.odd
{
background:#ffffee;<!--奇数行样式-->
}
.even
{
background:#fff38f;<!--偶数行样式-->
}
.first
{
background:red;<!--首行样式-->
}
.last
{
background:blue;<!--末行样式-->
}
.mouseOver
{
background:green;<!--鼠标经过时样式-->
}
</style>
</head>
<body>
<!--表格内容-->
<table>
<tr>
<td>姓名</td><td>年龄</td><td>职业</td>
</tr>
<tr>
<td>张三</td><td>25</td><td>前端工程师</td>
</tr>
<tr>
<td>李四</td><td>26</td><td>前端工程师</td>
</tr>
<tr>
<td>王五</td><td>27</td><td>前端工程师</td>
</tr>
<tr>
<td>赵六</td><td>28</td><td>前端工程师</td>
</tr>
</table>
<!---->
<script type="text/javascript">
$(function(){
$("tr:odd").addClass("odd"); //设置奇行样式
$("tr:even").addClass("even"); //设置偶行样式
$("tr:first").addClass("first"); //设置首行加样式
$("tr:last").addClass("last"); //设置末行加样式
$("tr").mouseover(function() {
$(this).addClass("mouseOver") //设置鼠标经过时样式
}).mouseout(function() {
$(this).removeClass("mouseOver")//鼠标离开时去掉样式
});
})
</script>
</body>
</html>
#学习笔记#(5)表格奇偶行颜色样式JavaScript+CSS+HTML
最新推荐文章于 2023-04-07 21:57:49 发布