JQuery实现table隔行变色及鼠标滑动变色

最新推荐文章于 2023-05-24 09:32:32 发布

原创最新推荐文章于 2023-05-24 09:32:32 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用JQuery为HTML表格实现隔行变色的效果，同时展示了如何添加鼠标滑过行时改变颜色的交互功能，以提升用户在查看表格数据时的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实例：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>jquey实现表格隔行变色及鼠标滑过变色.html</title>
		<link rel="stylesheet" href="css/font.css">
		<link rel="stylesheet" href="css/table.css">
		<script src="js/jquery-2.2.3.min.js"></script>
		<script type="text/javascript">
			$(function(){
				
				//添加tr基数背景色样式
			      $("#title tr:even").css("background","#999");
				
				//even:设置tr基数背景色
				  $("#title tr:even").attr("bg","#999");
				
				//odd:设置tr偶数背景色
                  $("#title tr:odd").attr("bg","#fff");
				
				//mouseover():鼠标滑动事件，设置tr背景色
				  $("#title tr").mouseover(function(){
					$(this).css("background","yellow");
				  });
				//当鼠标移出tr时，设置背景色
				  $("#title tr").mouseout(function(){
				  	 //attr():获取元素属性
					 var bgc = $(this).attr("bg");
                     $(this).css("background",bgc);
				});
			});
		</script>
	</head>
	<body>
		  <table id="title">
			<tr>
				<td>编号</td>
				<td>姓名</td>
				<td>年龄</td>
			</tr>
			<tr>
				<td>1001</td>
				<td>jok</td>
				<td>25</td>
			</tr>
			<tr>
				<td>1002</td>
				<td>jok</td>
				<td>25</td>
			</tr>		
			<tr>
				<td>1003</td>
				<td>jok</td>
				<td>25</td>
			</tr>
			<tr>
				<td>1004</td>
				<td>jok</td>
				<td>25</td>
			</tr>																																				
		</table>		
	</body>
</html>

2.运行效果：