web 实验4

最新推荐文章于 2024-09-11 22:31:16 发布

Ayyy_

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量38

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/Ayyy_/article/details/130305093

版权

此代码示例展示了如何使用HTML、CSS和jQuery处理表格数据。当用户点击奥斯卡获奖电影列表中的‘查看’链接时，会跳转到一个新的页面，并将电影的详细信息作为GET参数传递。目标页面则解析这些参数，填充相应的详细信息展示。

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Oscar List</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!-- 引用jQuery包 -->
<script src="js/jquery-3.1.1.min.js"></script>

<style>
	/* 将所有偶数行的背景色改为#dddddd */
	#main_table tr:nth-child(even){
		background-color: #dddddd;
	}
	/* 利用CSS伪类选择器，鼠标移上偶数行背景色改为#3dc1f1，鼠标移上奇数行背景色改为#bbedff */
	#main_table tr:nth-of-type(even):hover{
		background:#3dc1f1;
	}
	#main_table tr:nth-of-type(odd):hover{
		background-color: #bbedff;
	}
</style>
<script>
	
	// 为表格添加最后一列，该列所有单元格均放置一个“查看”链接，
	// 点击链接后在新页面打开detail.html，并构造get参数放入链接所在行所有的内容
	$(document).ready(function(){
		$("tr").each(function(){
			var url = "detail.html";
			url+="?year=" + $(this).find("td").eq(0).text();
			url+="&number="+encodeURIComponent($(this).find("td").eq(1).text());
			url +="&cnname="+encodeURIComponent($(this).find("td").eq(2).text()) ;
			url +="&enname="+encodeURIComponent($(this).find("td").eq(3).text()) ;
			url +="&nshowyear="+encodeURIComponent($(this).find("td").eq(4).text()) ;

			$(this).append("<td><a href='"+url+"' target='_blank'>查看</a></td>")
		})

	})
	// //第一行添加一个空的列
	// $(document).ready(function(){
	// 	$("table tr:first td:last").append("<td></td>")

	// })
	// 删去第一行中最后一列的文本内容
	$(document).ready(function(){
		$("table tr:first td:last").remove();
	});
</script>
</head>
<body>
<div id="main_area">
	<table id='main_table' cellpadding="0" cellspacing="0">
    	<tr><th>年份</th><th>奥斯卡</th><th>影片（中文名）</th><th>影片（英文名）</th><th>上映年份</th></tr>
		<tr><td>2023</td><td>95届</td><td>瞬息全宇宙</td><td>Everything Everywhere All at Once</td><td>2022</td></tr>
		<tr><td>2022</td><td>94届</td><td>健听女孩</td><td>Children of Deaf Adults</td><td>2021</td></tr>
		<tr><td>2021</td><td>93届</td><td>无依之地</td><td>Nomadland</td><td>2020</td></tr>
		<tr><td>2020</td><td>92届</td><td>极速车王</td><td>Ford v.Ferrari</td><td>2019</td></tr>
		<tr><td>2019</td><td>91届</td><td>绿皮书</td><td>Green Book</td><td>2018</td></tr>
		<tr><td>2018</td><td>90届</td><td>水形物语</td><td>The Shape of Water</td><td>2018</td></tr>
		<tr><td>2017</td><td>89届</td><td>月光男孩</td><td>Moonlight</td><td>2017</td></tr>
		<tr><td>2016</td><td>88届</td><td>聚焦</td><td>Spotlight</td><td>2016</td></tr>
		<tr><td>2015</td><td>87届</td><td>鸟人</td><td>Birdman</td><td>2015</td></tr>
		<tr><td>2014</td><td>86届</td><td>为奴十二年</td><td>12 Years a Slave</td><td>2014</td></tr>
		<tr><td>2013</td><td>85届</td><td>逃离德黑兰</td><td>Argo</td><td>2013</td></tr>
		<tr><td>2012</td><td>84届</td><td>艺术家</td><td>The Artist</td><td>2011</td></tr>
		<tr><td>2011</td><td>83届</td><td>国王的演讲</td><td>The King's Speech</td><td>2010</td></tr>
		<tr><td>2010</td><td>82届</td><td>拆弹部队</td><td>The Hurt Locker</td><td>2008</td></tr>
		<tr><td>2009</td><td>81届</td><td>贫民窟的百万富翁</td><td>Slumdog Millionaire</td><td>2008</td></tr>
		<tr><td>2008</td><td>80届</td><td>老无所依</td><td>No Country for Old Men</td><td>2007</td></tr>
		<tr><td>2007</td><td>79届</td><td>无间道风云</td><td>The Departed</td><td>2006</td></tr>
		<tr><td>2006</td><td>78届</td><td>撞车</td><td>Crash</td><td>2004</td></tr>
		<tr><td>2005</td><td>77届</td><td>百万美元宝贝</td><td>Million Dollar Baby</td><td>2004</td></tr>
		<tr><td>2004</td><td>76届</td><td>指环王3</td><td>The Lord of the Rings: The Return of The King</td><td>2003</td></tr>
		<tr><td>2003</td><td>75届</td><td>芝加哥</td><td>Chicago</td><td>2002</td></tr>
		<tr><td>2002</td><td>74届</td><td>美丽心灵</td><td>A Beautiful Mind</td><td>2001</td></tr>
		<tr><td>2001</td><td>73届</td><td>角斗士</td><td>Gladiator</td><td>2001</td></tr>
		<tr><td>2000</td><td>72届</td><td>美国丽人</td><td>American Beauty</td><td>2000</td></tr>
    </table>
</div>
</body>
</html>

跳转页：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Detail</title>
	<link href="css/main.css" rel="stylesheet" type="text/css" />
	<!-- 引用jQuery包 -->
	<script src="js/jquery-3.1.1.min.js"></script>
	<script>
		$(document).ready(function () {
			// 获取年份等信息
			var params = window.location.href.split("?")[1].split("&");
			var year = decodeURI(params[0].split("=")[1]);
			var number = decodeURI(params[1].split("=")[1]);
			var cnname = decodeURI(params[2].split("=")[1]);
			var enname = decodeURI(params[3].split("=")[1]);
			var showyear = decodeURI(params[4].split("=")[1]);
			// 将信息填入对应的表格中
			$("#year").html(year);
			$("#number").html(number);
			$("#cnname").html(cnname);
			$("#enname").html(enname);
			$("#showyear").html(showyear);
			// 将影片的中文名写入到网页的title中
			document.title = cnname;
			// 通过jQuery显示对应的剧照图片，只需修改图片的src属性即可
			$("#moviepic").attr("src", "images/" + year + ".jpg")



		})
	</script>
</head>

<body>
	<div id="main_area">
		<img id="moviepic" src="images/.jpg" /><br>
		<table id="detail_table" cellpadding="0" cellspacing="0">
			<tr>
				<td>获奖年份</td>
				<td id="year">1</td>
			</tr>
			<tr>
				<td>届数</td>
				<td id="number">2</td>
			</tr>
			<tr>
				<td>影片中文名</td>
				<td id="cnname">3</td>
			</tr>
			<tr>
				<td>影片英文名</td>
				<td id="enname">4</td>
			</tr>
			<tr>
				<td>上映年份</td>
				<td id="showyear">5</td>
			</tr>
		</table>
	</div>
</body>

</html>