jQuery学习07---隔行变色，光棒效果，鼠标变小手

最新推荐文章于 2020-12-26 20:23:35 发布

onyas

最新推荐文章于 2020-12-26 20:23:35 发布

阅读量2.8k

点赞数

分类专栏： jQuery 文章标签：隔行变色光棒效果鼠标变小手

本文链接：https://blog.csdn.net/zheng0518/article/details/9141353

版权

jQuery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=GBK">
		<link rel="stylesheet" type="text/css" href="table.css">
		<title></title>
		<script src="../jquery-1.8.2.js" type="text/javascript"></script>
		<style type="text/css">
		</style>
		<script type="text/javascript">
			$(function()
			{
				//表头
				$("#salary tr:eq(0)").css({"font-size":"30px","text-align":"center"});
				//最后一行
				$("#salary tr:last").css("color","red");
				//排除表头的前三项
				$("#salary tr:not(:first):lt(3)").css("font-size","22px").css("color","red");
				//隔行变色,排除表头和表尾
				var str = "#salary tr:not(:first):not(:last)"
				$(str+":even").css("background-color","yellow");
				//光棒效果
				var bgcolor;
				$(str).mouseover(function()
				{
					bgcolor = $(this).css("background-color");
					$(this).css("background-color","blue");
				}).mouseout(function()
				{
					$(this).css("background-color",bgcolor);
				});
				//数据行，鼠标变小手
				$(str).css("cursor","pointer");
			});
		</script>
	</head>
	<body>
		<table id="salary" width="400px" border="1px">
			<tr>
				<td>姓名</td>
				<td>年龄</td>
				<td>工资</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>12</td>
				<td>1500</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>19</td>
				<td>1300</td>
			</tr>
			<tr>
				<td>小六</td>
				<td>16</td>
				<td>1090</td>
			</tr>
			<tr>
				<td>小七</td>
				<td>18</td>
				<td>1340</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>10</td>
				<td>1000</td>
			</tr>
			<tr>
				<td>汇总</td>
				<td colspan="2">6000</td>
			</tr>
		</table>
	</body>
</html>

onyas

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习07---隔行变色，光棒效果，鼠标变小手

$(function() { //表头 $("#salary tr:eq(0)").css({"font-size":"30px","text-align":"center"}); //最后一行 $("#salary tr:last").css("color","red"); //排除表头的前三项 $("#salary tr:not(:firs
复制链接

扫一扫

专栏目录