#学习笔记#(5)表格奇偶行颜色样式JavaScript+CSS+HTML

最新推荐文章于 2024-04-07 17:33:13 发布

游走走

最新推荐文章于 2024-04-07 17:33:13 发布

阅读量2.3k

点赞数 1

分类专栏：学习笔记 web

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_24734285/article/details/50171207

版权

学习笔记同时被 2 个专栏收录

108 篇文章 0 订阅

订阅专栏

web

93 篇文章 1 订阅

订阅专栏

<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>

游走走

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
#学习笔记#(5)表格奇偶行颜色样式JavaScript+CSS+HTML

表格奇偶行样式 .odd{ background:#ffffee;} .even{ background:#fff38f;} .first{ background:red;} .last{ background:blue;} .mouseOver{ background:green; } 姓名年龄职业张三25前端工程师李四26
复制链接

扫一扫