jQuery——02

Bug码畜

于 2022-03-04 09:52:37 发布

阅读量508

点赞数

文章标签： jquery 前端

本文链接：https://blog.csdn.net/qq_52158380/article/details/123269720

版权

本文介绍了如何使用HTML和jQuery创建一个带有斑马线效果的表格，展示了学生的基本信息，包括姓名、性别、年龄和专业。通过CSS样式和jQuery实现表格居中、单元格居中，以及鼠标悬停时的背景颜色切换。

摘要由CSDN通过智能技术生成

斑马线表格

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<meta charset="utf-8">
		<title>斑马线表格</title>
		<style type="text/css">
			*{
				margin: 0 auto;  //表格居中
			}
		</style>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="0">
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>专业</th>
				</tr>
			<tr>
				<td>李文</td>
				<td>男</td>
				<td>20</td>
				<td>大数据</td>
				</tr>
				<tr>
					<td>王楠</td>
					<td>女</td>
					<td>19</td>
					<td>软件技术</td>
					</tr>
					<tr>
						<td>赵倩</td>
						<td>女</td>
						<td>18</td>
						<td>人工智能</td>
						</tr>
						<tr>
							<td>叮咛</td>
							<td>女</td>
							<td>21</td>
							<td>动漫制作</td>
							</tr>
							<tr>
								<td>睢阳</td>
								<td>女</td>
								<td>22</td>
								<td>数据库应用</td>
								</tr>
								<tr>
									<td>楠喃</td>
									<td>女</td>
									<td>21</td>
									<td>前端网站</td>
									</tr>
		</table>
		<script type="text/javascript">
		
			$('table').css({'width':'800','height':'200'});
			$('tr').css('textAlign','center');
		
			//如果在文档没有完全加载之前就运行函数，操作可能失败。
			//在这些代码外面加上一层 $('document').ready(function(){})
			//可以防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
			//DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。
			$("tr:even").hover(function(){
			  $("tr:even").css("background-color","#7a7281");//莫兰迪色系
			  },function(){
			  $("tr:even").css("background-color","#f0ebe5");
			});
			
			
			$("tr:odd").hover(function(){
			  $("tr:odd").css("background-color","#656565");
			  },function(){
			  $("tr:odd").css("background-color","#fdf9ee");
			});
			
			$('tr:first').css('background','#6b5152');
			//后部的操作函数会覆盖之前的
		</script>
	</body>
</html>

jQuery选择器

Bug码畜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery——02

斑马线表格HTML代码<!DOCTYPE html><html> <head> <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script> <meta charset="utf-8"> <title>斑马线表格</title> <style type="text/css"&
复制链接

扫一扫