jQuery篇——换行表格

最新推荐文章于 2024-12-14 22:03:36 发布

小九SY橙子

最新推荐文章于 2024-12-14 22:03:36 发布

阅读量604

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/String____/article/details/104958525

jQuery 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery实现表格元素在鼠标悬停时改变样式的效果，并展示了如何通过margin属性使表格居中。内容包括jQuery代码、CSS样式和HTML结构的示例。

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

收获：
1.hover选择鼠标指针浮动在其上的元素，并设置其样式
2.margin: auto;//表格居中
》》》》》》》》》》》》》》》》》》》
效果图
在这里插入图片描述
鼠标点击效果

jQ代码

$(function(){
	$("tr:even").addClass('bg1');//偶数行
	$("tr:odd").addClass('bg2');//奇数行
	$('td').hover(function(){//hover选择鼠标指针浮动在其上的元素，并设置其样式
		$(this).addClass('bg3');//addClass加样式
	},function(){
		$(this).removeClass('bg3');//removeClass移除样式
		
	})	
})

css代码

table{
	border: 2px solid 	#4B0082;
	margin: auto;//表格居中
}
td{
	border: 2px solid   #4B0082 ;
	width: 150px;
	height: 40px;
	text-align: center;
} 
.bg1{
	background-color: 	#9370DB;
}
.bg2{
	background-color:   #D8BFD8;
}
.bg3{
    background-color: 	#4B0082;	
}

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>换行表格</title>
		<link rel="stylesheet" href="./css/4-3.css" />
	</head>
	<body>
		<div>
			<table>
				<tr>
					<td>数据库技术与应用</td>
					<td>jQuery应用技术</td>
					<td></td>
					<td></td>
				</tr>	
				<tr>
					<td></td>
					<td>java语音</td>
					<td></td>
					<td>c语言</td>
				</tr>	
				<tr>
					<td>大学体育</td>
					<td></td>
					<td>PHP语言</td>
					<td></td>
				</tr>	
				<tr>
					<td>HTML</td>
					<td></td>
					<td></td>
					<td>大学英语</td>
				</tr>	
			</table>		
		</div>
		<script   type="text/javascript"  src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript"  src="js/4-3.js" ></script>
	</body>
</html>