题目：
1、修改css/main.css文件调整oscarlist.html中的表格样式
(1) 将所有偶数行背景色改为#dddddd
(2) 利用CSS伪类选择器，鼠标移上偶数行背景色改为#3dc1f1，鼠标移上奇数行背景色改为#bbedff
2、引用jQuery包，编写jQuery代码
(1) 为表格添加最后一列，该列所有单元格均放置一个“查看”链接，点击链接后在新页面打开detail.html，并构造get参数放入链接所在行所有的内容。
原理：构造包含链接的单元格HTML代码（例：<td><a href="…" target="_blank">查看</a></td>），再追加到每个tr尾部即可，最好使用append方法；构造链接的URL时，需要提取本行所有单元格的内容，先利用jQuery选择链接所在行的前5个单元格，再使用text()方法提取单元格内的内容
需要构造的链接代码例：<a href="detail.html?year=2000&number=72%E5%B1%8A& cnname=%E7%BE%8E%E5%9B%BD%E4%B8%BD%E4%BA%BA&enname=American%20Beauty&showyear=2000" target="_blank">查看</a>
参数说明：year获奖年份，number届数，cnname影片中文名，enname影片英文名，showyear上映年份
所有放入URL的参数值需要进行UrlEncode编码：encodeURIComponent("72届")
3、修改detail.html代码，引用jQuery包，编写jQuery代码
(1) 接收URL中的get参数，原理：先提取URL，然后再使用正则表达式识别URL中的各参数值：
提取URL的方法：window.location.href
提取到参数值后再解码，例：decodeURI("72%E5%B1%8A")
(2) 通过jQuery的html方法将所有的get参数渲染到表格对应的单元格中，再将影片的中文名写入到网页的title中
(3) 通过jQuery显示对应的剧照图片，只需修改图片的src属性即可，图片路径格式为"images/获奖年份.jpg"。
4、要求：本实验不允许修改HTML源代码，只能通过jQuery动态渲染HTML元素和内容。
代码：
oscarlist.html
<!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" />
<style>
#main_table tr:nth-child(even){
background-color: #dddddd !important;
}
#main_table tr:nth-child(odd) :hover{
background-color: #bbedff !important;
}
#main_table tr:nth-child(even) :hover{
background-color: #3dc1f1 !important;
}
</style>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
$().ready(function(){
$("tr").each(function(){
if($(this).find("td").eq(0).text() != '') {
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 += "&showyear=" + encodeURIComponent($(this).find("td").eq(4).text());
$(this).append("<td><a href='" + url + "' target='_blank'>查看</a></td>")
}
});
});
</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>
detail.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" />
<script src="js/jquery-3.1.1.min.js"></script>
<script>
$().ready(function(){
//接收URL中的get参数
(function ($){
$.getUrlParam = function (name){
var reg = new RegExp("(^|&)"+ name + "=([^&]*)(&|$)");
var r = decodeURIComponent(window.location.search.substr(1)).match(reg);
if (r != null) return unescape(r[2]); return null;
}
})(jQuery);
//将每个get参数渲染到表格对应的单元格中
//得到每个影片的参数
var year = $.getUrlParam('year');
var number = $.getUrlParam('number');
var cnname = $.getUrlParam('cnname');
var enname = $.getUrlParam('enname');
var showyear = $.getUrlParam('showyear');
//将参数渲染到表格中去
$(this).find('tr').eq(0).find('td').eq(1).append(" "+year);
$(this).find('tr').eq(1).find('td').eq(1).append(" "+number);
$(this).find('tr').eq(2).find('td').eq(1).append(" "+cnname);
$(this).find('tr').eq(3).find('td').eq(1).append(" "+enname);
$(this).find('tr').eq(4).find('td').eq(1).append(" "+showyear);
//将影片中文名写入网页title中
$(function (){
$('title').html(cnname)
})
//显示对应剧组的照片
if(year == 2023) {
path = "images/" + year + ".png";
}
else{
path = "images/" + year + ".jpg";
}
$("#moviepic").attr('src',path);
});
</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>
1128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
