第二次任务（预备知识：第二、三章；分值：10分；选做：3选1；需辅导教师评分）实训二：显示数据列表1.题目显示数据列表。
2.目的（1）掌握流程控制语句的使用。
（2）掌握函数的使用。
（3）理解闭包的概念。
（4）应会设计基本的应用程序。
3.内容在所设计的项目中，实现显示数据列表。
数据以表格的方式显示，不同的行显示不同的颜色。
当单击每行数据的标题时，将会弹出窗口，显示详细信息。
4.要求（1）数据存放在数组中，用程序实现数据显示。
（2）以闭包的方式定义工具，窗口函数封装在工具中。
（3）通过循环生成数据行，用条件判断实现不同行显示不同的颜色。
参考答案：这个任务可以通过JavaScript和HTM1实现。
我们需要一个HTM1表格来显示数据，然后使用JaVaSCriPt来填充数据和控制行颜色以及弹出窗口。
这里是一个简单的示例：首先，创建一个HTM1文件，例如叫做index.htm1：htm1复制代码<!DOCTYPE htm1><htm1><head>CtitIe>数据列表显示<∕tit1e><sty1e>tab1e{width:100%;border-co11apse:co11apse;)th,td{border:Ipx so1idb1ack;padding:8px;text-a1ign:1eft;}.odd-row{background-co1or:#f2f2f2;).even-row{background-co1or:#FFfFFf;}<∕sty1e><∕head><body><tab1e id=,,data-tab1e"><∕tab1e><script src=',script.js,,><∕script><∕body><∕htm1>然后，创建一个JaVaSCriPt文件，例如叫做SCriPt.js：javascript复制代码//定义数据数组var data=[{name:"张三∖age:23,gender:“男"},{name:,1李四,,,age:24,gender:,,女,,},{name:“王五"，age:25,gender:“男"},//更多数据.・・]；//创建并返回一个函数，该函数用于创建并返回一个表格行元素function createRow(data1tem){//使用数据项创建并返回一个表格行元素var row=document.CreateE1ement(,tr,);var nameCe11=document.cReateE1ement(,td,);nameCe11.textcontent=;row.appendChi1d(nameCe11);var ageCe11=document.CreateE1ement(,td,);ageCe11.textcontent=data1tem.age;row.appendChi1d(ageCe11);var genderCe11=document.CreateE1ement(,td,);genderCe11.textcontent=data1tem.gender;row.appendChi1d(genderCe11);return row;)//创建并返回一个函数，该函数用于创建并返回一个带有标题的表格行元素，并且该行在被点击时会弹出一个窗口显示详细信息function CreateTit1eROW(titIe){//使用标题创建并返回一个表格行元素，该行在被点击时会弹出一个窗口显示详细信息var row=createRow({name:tit1e,age:'点击查看"gender:'点击查看’})；//使用“点击查看”作为占位符文本，直到实现弹出窗口的功能为止row.addEvent1istener('c1ick'function(){//为该行添加一个点击事件监听器，当该行被点击时，将弹出一个窗口显示详细信息var win=WindoW.open(,,,新窗口中创建一个新的表格，其中包含标题行(Name,Age,Gender)win.document.write(,<tr><td>,+data[0].name+,<∕td><td>,+data[0].age+,<∕td><td>< +data[0].gender+,<∕td><∕tr>');//在新窗口中添加第一行数据(假设第一行数据是标题行)for(var i=1;i<data.1ength;i++){//对于数据数组中的每一项数据，在新窗口中添加一行数据(除了标题行)win.document.write(,<tr><td>,+data[i].name+,<∕td><td>,+data[i].age+,<∕td><td>,+d ata[i].gender+,<∕td><∕tr>,);//在新窗口中添加一行数据(Name,Age,Gender)} win.document.write('<∕tab1e>,);//在新窗口中关闭表格标签，完成表格的创建和数据的添加win.document.c1ose();//关闭新窗口的文档对象模型(DOM),完成新窗口的创建和数据的添加，然后使新窗口可读或可写(取决于用户的设置)})；//在该行上添加一个点击事件监听器，当该行被点击时，将弹出一个窗口显示详细信息(Name,Age,Gender)的表格，其中包含所有数据项的数据(Name,Age,Gender)实训三：随机显示题头图片1.题目随机显示题头图片。
