diff --git a/001.html b/001.html new file mode 100644 index 00000000..95054fb3 --- /dev/null +++ b/001.html @@ -0,0 +1,24 @@ + + + + Central Park + + + + + + +
+ + + + +
+ + + + + + + + \ No newline at end of file diff --git a/002.html b/002.html new file mode 100644 index 00000000..dacf6169 --- /dev/null +++ b/002.html @@ -0,0 +1,24 @@ + + + + Central Park + + + + + + +
+ + + + +
+ + + + + + + + \ No newline at end of file diff --git a/003.html b/003.html new file mode 100644 index 00000000..f99f6a2f --- /dev/null +++ b/003.html @@ -0,0 +1,24 @@ + + + + Central Park + + + + + + +
+ + + + +
+ + + + + + + + \ No newline at end of file diff --git a/004.html b/004.html new file mode 100644 index 00000000..3fc7324f --- /dev/null +++ b/004.html @@ -0,0 +1,24 @@ + + + + Central Park + + + + + + +
+ + + + +
+ + + + + + + + \ No newline at end of file diff --git a/Lab02.html b/Lab02.html index e69de29b..d9d267b6 100644 --- a/Lab02.html +++ b/Lab02.html @@ -0,0 +1,76 @@ + + + + + + Lab02.html + + + + + + +

+ camera + share your travels +

+ + + +

New York - Central Park

+ +
+

Description

+

Photo by Randy Connoly

+

This photo of Conservatory Pond in Central Park in New York City was taken on October 22,2016 with a Canon EOS 30D camera.

+
+ +
+
Conservatory Pond in Central Park
+
+

+ Options + + + + + +

+
+ +
+

Related Photos

+ + + +
+ +
+

Reviews

+ + Ricardo on 2016-05-23 +

Easy on the HDR buddy.

+
+ + Susan on 2016-11-18 +

I love Central Park.

+
+
+ + + + + + + + + diff --git a/Lab03.css b/Lab03.css new file mode 100644 index 00000000..55bdd995 --- /dev/null +++ b/Lab03.css @@ -0,0 +1,136 @@ +body{ + min-width: 600pt; + font-family: sans-serif serif; + background-color: #E8EAF6; + padding-left: 5%; + padding-right: 5%; +} + +h1{ + font-size: 1.5em; + text-transform: capitalize; +} + +h2{ + text-transform: uppercase; + color: white; + background-color: #7986CB; + padding: 1em; +} + +header{ + color: white; + background-color: #1A237A; + padding-top: 1em; + padding-left: 1em; + padding-bottom: 1em; +} + +header > p{ + font-style: italic; +} + + +hr{ + color: #C5CAE9; + margin: 0.5em 1em 0 1em; +} + +footer{ + background-color: #1A237E; + padding: 1.3em 1em; + color: white; +} + +nav{ + background: #3F51B5; + color: #00B0FF; + padding-top: 0.4em; + padding-left: 0.7em; + padding-bottom: 0.4em; + margin-bottom: 0.5em; +} + +a{ + color: #00B0FF; + padding: 0.3em; +} + +a:link:hover{ + color: white; + background-color: #F50057; + padding: 0.3em; +} + +.subheader{ + font-family: "Times New Roman"; +} + +.subcolor{ + color: #7990A3; +} + +.form{ + padding-top: 0.5em; + padding-left: 1em; +} + +.date{ + color: #F5A2C1; +} + +.bottom-space{ + padding-bottom: 0.8em; +} + +.RelatedPhotos{ + margin-top: 0.5em; +} + +.footerspace{ + margin-top: 0.6em; +} + +.frame{ + border-style: none solid solid solid; + border-color: #C5CAE9; + border-width: 1px; +} + +.photo-show{ + border="2"; +} + +#conservatory{ + padding: 0.5em 1em; + background-color: #C5CAE9; +} + +#maincontent { + background-color: white; + padding: 0.5em; + margin-bottom: 0.5em; +} + +#center-image { + width: 100%; +} + +#image-group{ + text-align: right; + padding-top: 1em; + padding-right: 1em; + padding-left: 1em; + padding-bottom: 0.3em; +} +#image-group2{ + /* font-size: 0; */ + margin-bottom: -0.2em; +} + +#ThisPhoto{ + padding-top: 0.5em; + padding-right: 1em; + padding-bottom: 0em; + padding-left: 1em; +} diff --git a/Lab03.html b/Lab03.html new file mode 100644 index 00000000..27af7131 --- /dev/null +++ b/Lab03.html @@ -0,0 +1,83 @@ + + + + + + + + + Lab03.html + + + +
+
+

share your travels

+

Let us know where you've been

+
+
+ + + + +
+
+

New York - Central Park

+ + central-park +
+

Conservatory Pond in Central Park

+ +

This photo of Conservatory Pond in + Central Park in New York City + was taken on with a Canon EOS 30D camera. +

+ +

+ + + + + +

+
+ +
+

Related Photos

+

+ + + +

+
+ +
+

Reviews

+

By Ricardo on 2016-05-23

+

Easy on the HDR buddy.

+
+

By Susan on 2016-11-18

+

I love Central Park.

+
+
+
+ + + + + + + + + + diff --git a/Lab04.html b/Lab04.html index a40c8629..d9dfb26f 100644 --- a/Lab04.html +++ b/Lab04.html @@ -1,22 +1,152 @@ - + - - - Lab 04 - - - - -
-

Share Your Travels

-

let us know where you've been

-
-
-
- -
-
- - - - \ No newline at end of file + + + Lab04 + + + + +
+
+

share your travels

+

Let us know where you've been

+
+ + +
+ +
+
+

Photo Details

+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ + +
+ + +
+ +
+ +
+ + + + + + + + + +
+ +
+ +
+ +
+
+
+ Rate this photo: +
+ +
+
+ Color collection: +
+ +
+
+ +
+
+ Date Taken: +
+ +
+ +
+ Time Taken: +
+ +
+
+
+ + + +
+
+
+ + + + + + diff --git a/Lab04.pdf b/Lab04.pdf new file mode 100644 index 00000000..33b5cbfb Binary files /dev/null and b/Lab04.pdf differ diff --git a/Lab05.html b/Lab05.html new file mode 100644 index 00000000..bb712efa --- /dev/null +++ b/Lab05.html @@ -0,0 +1,155 @@ + + + + + + lab05.html + + + + + + +
+
+
+

share your travels

+

Let us know where you've been

+
+ + + + +
+ +
+
+
+
+
+

New York - Central Park

+

Conservatory Pond in Central Park +

+ + central-park + +

This photo of Conservatory Pond in + Central Park in New York City + was taken on with a Canon EOS 30D camera. +

+ +

+ + + + + +

+
+
+
+ +
+
+
+

Related Photos

+ +
+
+ +
+
+

Reviews

+
+
+ Ricardo +
+

2016-05-23

+
+ Easy on the HDR buddy. +
+
+
+ Susan +
+

2016-11-18

+
+ I love Central Park. +
+
+
+
+
+
+
+ +
+ + + +
+ + +
+ + + + + + diff --git a/Lab06.html b/Lab06.html index 6c15b947..953fb9e0 100644 --- a/Lab06.html +++ b/Lab06.html @@ -4,15 +4,26 @@ Lab06 +<<<<<<< HEAD +======= +>>>>>>> upstream/master

Share Your Travels

+<<<<<<< HEAD +
+ +
+ + +=======
+>>>>>>> upstream/master \ No newline at end of file diff --git a/Lab07.css b/Lab07.css new file mode 100644 index 00000000..03a8ebc6 --- /dev/null +++ b/Lab07.css @@ -0,0 +1,40 @@ +body{ + text-align: center; +} + +select, #btCommit{ + width: 300px; + padding:0 0.5em; + margin: 0.2em; +} + +table{ + margin: auto; +} + +th{ + color: whitesmoke; + background-color: grey; + margin: 2px; +} + +td{ + padding: 0 0.5em; +} + +input{ + margin: 1px; +} + +#btCommit{ + display: none; + cursor: pointer; +} + +#inputTableName, #inputTableColumn{ + display: none; +} + +.odd{ + background-color: lightgrey; +} \ No newline at end of file diff --git a/Lab07.html b/Lab07.html new file mode 100644 index 00000000..2cff435a --- /dev/null +++ b/Lab07.html @@ -0,0 +1,47 @@ + + + + + Lab07New + + + + +
+ +
+
+ + +
+
+ +
+ +
+ +
+ +
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/Lab07.js b/Lab07.js new file mode 100644 index 00000000..dd4b1e28 --- /dev/null +++ b/Lab07.js @@ -0,0 +1,301 @@ +arrayTableName = []; +arrayTableName[0] = "SELECT (default: last created)"; +var arrayRowsNum = []; +var arrayColumnNum = []; + +//btCommit出现 +function btCommitToShow(){ + var btCommit = document.getElementById("btCommit"); + btCommit.style.display = "inline-block"; +} +//btCommit隐藏 +function btCommitHidden(){ + var btCommit = document.getElementById("btCommit"); + btCommit.style.display = "none"; + //btCommit.visibility = "hidden"; +} +//显示两个input +function twoInputsToShow(){ + document.getElementById("inputTableName").style.display = "inline-block"; + document.getElementById("inputTableColumn").style.display = "inline-block"; +} +//隐藏两个按钮并清除value +function twoInputsHidden(){ + document.getElementById("inputTableName").style.display = "none"; + document.getElementById("inputTableName").value = ""; + document.getElementById("inputTableColumn").style.display = "none"; + document.getElementById("inputTableColumn").value = ""; +} + +//两个input如果不为空就创造第一个select的表头 +function checkIfTwoInputsBlank(tableRanking){ + var inputName = document.getElementById("inputTableName"); + var inputColumn = document.getElementById("inputTableColumn"); + inputName.onblur = function(){ + //check if the two inputs are filled with after the mouse on blur + if((this.value !== "") && (inputColumn.value !== "")){//想用正则表达式表达一下正数, + deleteDivRowsChildNodes(); + createAttrs(tableRanking, inputColumn.value); + } + }; + inputColumn.onblur = function(){ + if((this.value !== "") && (inputName.value !== "")){ + deleteDivRowsChildNodes(); + createAttrs(tableRanking, this.value); + } + }; +} + +function deleteDivRowsChildNodes(tableRanking){ + //除去多余的rows + if(document.getElementById("div" + tableRanking) !== null){ + var lalala = document.getElementById("div" + tableRanking).childNodes.length; + for(var i = 0; i < lalala; i++){ + document.getElementById("div" + tableRanking).removeChild(document.getElementById("divRows").childNodes[0]); + } + } + +} + +function hideDivRowsChildNodes(tableRanking){ + //隐藏上一个table创建出来的attrs的inputs + if(document.getElementById("div" + tableRanking) !== null){ + var lalala = document.getElementById("div" + tableRanking); + lalala.style.display = "none"; + } + +} + +//创造表头 +function createAttrs(tableRanking, columnNum){ + var divRows = document.getElementById("divRows"); + var div = document.createElement("div"); + div.setAttribute("id", "div" + tableRanking); + var show = new Array(columnNum); + + for(var i = 0; i < columnNum; i++){ + var input = document.createElement("input"); + input.placeholder = "Attribute"; + input.status = i; + //input.setAttribute("id", tableRanking + "-0-" + i);//1-0-0; 1-0-1; 1-0-2 表头的id + div.appendChild(input); + show[i] = false;//所有的input是否填满 + input.onblur = function(){ + if(this.value === ""){ + show[parseInt(this.status)] = false; + }else{ + show[parseInt(this.status)] = true; + } + for(var k = 0; k < columnNum; k++){ + if((k === columnNum - 1) && show[columnNum - 1]){//所有input不为空时显示commit + btCommitToShow(); + } + if(!show[k]){//一旦有空的地方就隐藏commit + btCommitHidden(); + break; + } + } + } + } + + divRows.appendChild(div); +} + +//在第二个表中加表头 +function addHeadSecondSelect(tableRanking){ + alert("78:add table head , tableRanking:" + tableRanking); + var divTable = document.getElementById("divTable");//已经存在的 + var table = document.createElement("table"); + table.setAttribute("id", "table" + tableRanking); + arrayTableName[tableRanking] = document.getElementById("inputTableName").value;//table1 存储表格名字 + arrayColumnNum[tableRanking] = document.getElementById("inputTableColumn").value;//存储表格列数 + + var tr = document.createElement("tr"); + tr.setAttribute("id", "table" + tableRanking + "firstTr"); + var arrayTrs = []; + + for(var i = 0; i < document.getElementById("div" + tableRanking).childNodes.length; i++){ + var th = document.createElement("th"); + th.innerText = document.getElementById("div" + tableRanking).childNodes[i].value; + arrayTrs[i] = th.innerText; + th.setAttribute("id", "-" + tableRanking + "-0-" + i);//-1-0-0; -1-0-1; -1-0-2这是th的id + tr.appendChild(th); + } + table.appendChild(tr); + divTable.appendChild(table); +} + +//添加第二个select的option +function addOptionSecondSelect(tableRanking){ + //alert("104: add option tableRanking" + tableRanking); + var select2 = document.getElementById("select2"); + var option = document.createElement("option"); + option.setAttribute("id", "secondSelectOption" + tableRanking);//为option创造id + option.selected = "selected"; + option.innerText = document.getElementById("inputTableName").value; + select2.appendChild(option); +} + +//为上面的select创造row, 把attrs改成div +function createRows(tableRanking){ + var div = document.getElementById("div" + tableRanking); + var attrs = div.childNodes; + for(var i = 0; i < arrayColumnNum[tableRanking]; i++){//这里本来应该是attrs.length + var input = document.createElement("input"); + input.placeholder = attrs[0].value; + input.setAttribute("id", tableRanking + "-1-" + i);//1-1-0； 1-1-1 + div.removeChild(attrs[0]); + div.appendChild(input); + input.onblur = function(){ + btCommitToShow(); + } + } +} + +//为第二个select添加row +function addRowsSecondSelect(tableRanking){ + arrayRowsNum[tableRanking] = (arrayRowsNum[tableRanking] == undefined)? 1 : arrayRowsNum[tableRanking] + 1; + var table = document.getElementById("table" + tableRanking); + var tr = document.createElement("tr"); + alert("tableRanking: " + tableRanking); + alert("arrayColumnNum[tableRanking] :" + arrayColumnNum[tableRanking]); + for(var i = 0; i < arrayColumnNum[tableRanking]; i++){ + var td = document.createElement("td"); + td.setAttribute("id", "-" + tableRanking + "-" + table.childNodes.length + "-" + i);//-1-1-0; -1-1-1; -1-1-2 + td.innerText = document.getElementById("div" + tableRanking).childNodes[i].value;//1-1-0 + if(table.childNodes.length % 2 === 0){//背景变成浅灰色 + td.className = "odd"; + } + tr.appendChild(td); + } + table.appendChild(tr); +} + +function deleteRowSecondSelect(tableRanking){ + var div = document.getElementById("div" + tableRanking); + var inputValueToSearch = []; + for(var i = 0; i < arrayColumnNum[tableRanking]; i++){ + //上面的select 的 input + inputValueToSearch[i] = document.getElementById(tableRanking + "-1-" + i).value; + alert(document.getElementById(tableRanking + "-1-" + i).value); + } + var toDeleteRowsSecondSelect = new Array(arrayRowsNum[tableRanking]); + for(var k = 0; k < arrayRowsNum[tableRanking]; k++){ + toDeleteRowsSecondSelect[k] = true;//假定都可以删除 + }//一行一行进行比较 + alert(arrayColumnNum[tableRanking] + " arrayColumnNum[tableRanking]"); + alert(arrayRowsNum[tableRanking] + " arrayRowsNum[tableRanking]"); + for(var j = 0; j < arrayColumnNum[tableRanking]; j++){ + for(var q = 1; q <= arrayRowsNum[tableRanking]; q++){ + if(inputValueToSearch[j] !== document.getElementById("-" + tableRanking + "-" + q + "-" + j).innerHTML){ + toDeleteRowsSecondSelect[j] = false; + alert(j + "false"); + } + } + } + for(var p = 0; p < toDeleteRowsSecondSelect.length; p++){ + alert("198"); + if(toDeleteRowsSecondSelect[p] === true){ + //删除这一行 + var table = document.getElementById("table" + tableRanking); + alert("table.childNodes[p+1]: p+1:" + (p+1)); + alert("209删除行"); + table.removeChild(table.childNodes[p+1]); + arrayRowsNum[tableRanking] = arrayRowsNum[tableRanking] - 1; + } + } +} + +function option0(){//select one + btCommitHidden(); + twoInputsHidden(); +} +function option1(){//crete table + // 第一个表格就是tableRanking === 1； + var tableRanking = document.getElementById("divTable").childNodes.length + (1 - 3);//第一个table是1，第二个是2，依次类推 + hideDivRowsChildNodes(tableRanking); + btCommitHidden(); + twoInputsToShow();//显示两个input，id是inputTableName和inputTableColumn + checkIfTwoInputsBlank(tableRanking); +} +function option2(){//add row + // 针对正在增加row的这个表格进行two inputs 的删除/隐藏 + twoInputsHidden(); + btCommitHidden();//隐藏commit按钮 + createRows(document.getElementById("divTable").childNodes.length - 3); +} +function option3(){//delete row + var tableRanking = document.getElementById("divTable").childNodes.length - 3; + btCommitToShow(); + twoInputsHidden(); + var attrs = document.getElementById("div" + tableRanking).childNodes; + for(var i = 0; i < attrs.length; i++){ + attrs[i].value = "";//把input里面的值去掉只留下placeholder + } + +} +function option4(){//delete table + +} + +//对于第一个select的事件处理 +function firstSelectEvents(){ + var select1 = document.getElementById("select1"); + var optionFirstSelect = select1.selectedIndex;//获取被选中的按钮0，请选择；1，选中；2，添加行；3，删除行；4，删除搜索得到的表格 + switch(optionFirstSelect){ + case 0://select one + option0(); + break; + case 1://create table + option1(); + break; + case 2://add rows + option2(); + break; + case 3: + option3(); + break; + case 4: + btCommitToShow(); + break; + } +} + +//第一个select发生变化时应该进行的处理 +document.getElementById("select1").onchange = function(){ + //对于事件的处理 + firstSelectEvents(); +}; + +//当commit按钮被点击时 +/** + * 1.create table + * 2.add row + * 3.delete row + * 4.delete + */ +document.getElementById("btCommit").onclick = function(){ + var optionFirstSelect = document.getElementById("select1").selectedIndex;//获取被选中的按钮0，请选择；1，选中；2，添加行；3，删除行；4，删除搜索得到的表格 + switch(optionFirstSelect){ + case 0: + break; + case 1://create table 时为第二个select添加option和head + //清除上一个table的展示 + alert(document.getElementById("divTable").childNodes.length - 3); + for(var i = 0; i < document.getElementById("divTable").childNodes.length - 3; i++){ + document.getElementById("divTable").childNodes[i + 3].style.display = "none"; + } + addHeadSecondSelect(document.getElementById("divTable").childNodes.length + 1 - 3); + addOptionSecondSelect(document.getElementById("divTable").childNodes.length - 3);//为什么divTable的孩子是4 + break; + case 2://add row 时为第二个select添加row + addRowsSecondSelect(document.getElementById("divTable").childNodes.length - 3); + break; + case 3://delete row时首先要进行匹配 + deleteRowSecondSelect(document.getElementById("divTable").childNodes.length - 3); + break; + case 4: + break; + } + +}; diff --git a/Lab07New.js b/Lab07New.js new file mode 100644 index 00000000..b86f3137 --- /dev/null +++ b/Lab07New.js @@ -0,0 +1,425 @@ +columnNumber = [];//记录每一个table的列数 +tableContent = [];//记录表格的内容 +tablesName = [];//记录表格的名字 +tableRanking = 0;//记录一共有几个表格 +rowRanking = 0;//记录正在运行的表格的第几行 + +//btCommit出现 +function btCommitToShow(){ + let btCommit = document.getElementById("btCommit"); + btCommit.style.display = "inline-block"; +} +//btCommit隐藏 +function btCommitHidden(){ + let btCommit = document.getElementById("btCommit"); + btCommit.style.display = "none"; +} +//显示两个input +function twoInputsToShow(){ + document.getElementById("inputTableName").style.display = "inline-block"; + document.getElementById("inputTableColumn").style.display = "inline-block"; +} +//隐藏两个按钮并清除value +function twoInputsHidden(){ + document.getElementById("inputTableName").style.display = "none"; + document.getElementById("inputTableName").value = ""; + document.getElementById("inputTableColumn").style.display = "none"; + document.getElementById("inputTableColumn").value = ""; +} + +function createAttrs(columnNum){ + let divRows = document.getElementById("divRows"); + //删除前面无用的子节点 + while(divRows.firstChild){//所以divRows的子节点到底是怎么删除的。。。 + divRows.removeChild(divRows.firstChild); + } + let show = new Array(columnNum); + for(let i = 0; i < columnNum; i++){ + let inputAttr = document.createElement("input"); + inputAttr.placeholder = "Attribute" + (i+1); + inputAttr.status = i; + show[i] = false; + divRows.appendChild(inputAttr); + inputAttr.onblur = function(){ + if(this.value){ + show[parseInt(this.status)] = true; + } + for(let k = 0; k < columnNum; k++){ + if((k === columnNum - 1) && show[columnNum - 1]){//所有input不为空时显示commit + btCommitToShow(); + } + if(!show[k]){//一旦有空的地方就隐藏commit + btCommitHidden(); + break; + } + } + } + } +} + +//当用户填好column时展示attrs +function inputColumnOnBlur(){ + let inputTableColumn = document.getElementById("inputTableColumn"); + let regularTest = /[0-9]*/m;//这个正则表达式是错误的。 + inputTableColumn.onblur = function(){ + if(this.value >= 0 && regularTest.test(this.value)){ + btCommitHidden(); + createAttrs(this.value); + } + } +} + +function clearRows(){ + let divRows = document.getElementById("divRows"); + while(divRows.firstChild){ + divRows.removeChild(divRows.firstChild); + } +} + +function createRows(currentTableRanking){ + let divRows = document.getElementById("divRows"); + for(let i = 0; i < columnNumber[currentTableRanking]; i++){ + let input = document.createElement("input"); + input.placeholder = tableContent[currentTableRanking][0][i]; + input.onblur = function(){ + btCommitToShow();//此处有一个bug就是：可以交全空白的。 + }; + divRows.appendChild(input); + } +} + +function createDeleteRows(){ + let divRows = document.getElementById("divRows"); + for(let i = 0; i < columnNumber[tableRanking - 1]; i++){ + let input = document.createElement("input"); + input.placeholder = tableContent[tableRanking - 1][0][i]; + input.onblur = function(){ + btCommitToShow();//此处有一个bug就是：可以交全空白的。 + }; + divRows.appendChild(input); + } +} + +function warning(){ + let warning = document.getElementById("warning"); + let p = document.createElement("p"); + p.innerText = "WARNING: You cannot undo this action!"; + warning.appendChild(p); +} + +function clearWarning() { + let warning = document.getElementById("warning"); + if(warning.firstChild){ + warning.removeChild(warning.firstChild); + } +} + +//对于每一次第一个select的onchange事件做出反应 +function option0(){//select one + clearWarning(); + btCommitHidden(); + clearRows(); + twoInputsHidden(); +} +function option1(){//create a table + clearWarning(); + twoInputsToShow(); + clearRows(); + inputColumnOnBlur(); +} +function option2(currentTableRanking){//add row + clearWarning(); + twoInputsHidden(); + btCommitHidden(); + clearRows(); + createRows(currentTableRanking); +} +function option3(){ + clearWarning(); + twoInputsHidden(); + btCommitHidden(); + clearRows(); + createDeleteRows(); +} +function option4(){ + twoInputsHidden(); + btCommitToShow(); + clearRows(); + warning(); +} + +/////////////////////////////////////对于第一个select的事件处理//////////////////////////// +function firstSelectEvents(){ + let select1 = document.getElementById("select1"); + let optionFirstSelect = select1.selectedIndex;//获取被选中的按钮0，请选择；1，选中；2，添加行；3，删除行；4，删除搜索得到的表格 + let currentTableRanking = document.getElementById("select2").selectedIndex - 1;//等于0就是默认值； + //alert("currentTableRanking:" + currentTableRanking ); + switch(optionFirstSelect){ + case 0://select one + option0(); + break; + case 1://create table + option1(); + break; + case 2://add rows + if(currentTableRanking >= 0){ + option2(currentTableRanking); + } + break; + case 3: + option3(); + break; + case 4: + option4(); + break; + } +} + +////////////////////////////////////对于第二个select的事件处理///////////// +function secondSelectEvents(){ + let select2 = document.getElementById("select2"); + let optionSecondSelect = select2.selectedIndex;//3 + clearSecondTableHead();//先把之前的给他整没了 + //alert("我已经把之前的给整没了"); + + if(optionSecondSelect === 0){ + //alert("选到默认了，啥也不用干。"); + }else{ + let diJiGeBiaoGe = optionSecondSelect - 1;// 2 + //alert("这是第" + optionSecondSelect +"个表格。\n" + "下标是" + diJiGeBiaoGe); + + let divTable = document.getElementById("divTable"); + let table = document.createElement("table"); + + rowRanking = tableContent[diJiGeBiaoGe].length;//有多少行， + for(let j = 0; j < rowRanking; j++){ + let tr = document.createElement("tr"); + for(let i = 0; i < columnNumber[diJiGeBiaoGe]; i++){ + if(j === 0){//这是表头 + let th = document.createElement("th"); + th.innerText = tableContent[diJiGeBiaoGe][0][i]; + tr.appendChild(th); + }else{//这是表元 + let td = document.createElement("td"); + td.innerText = tableContent[diJiGeBiaoGe][j][i]; + if(j % 2 === 0){ + td.className = "odd"; + }tr.appendChild(td); + } + } + table.appendChild(tr); + //alert("table已经加了第" + j + "行。"); + } + divTable.appendChild(table); + } +} + +////////////////////////////////////////以下是处理commit事件的函数////////////////////////////////////////////////// +//创造第二个表下方的表头 +function createSecondTableHead(){ + rowRanking = 0; + let divTable = document.getElementById("divTable"); + let table = document.createElement("table"); + let tr = document.createElement("tr"); + + let inputs = document.getElementsByTagName("input"); + let inputTableColumn = document.getElementById("inputTableColumn"); + columnNumber.push(inputTableColumn.value);//将每一个table的列数存进去。 + let ths = [];//ths暂时没有做什么 + for(let i = 0; i < inputTableColumn.value; i++){ + let th = document.createElement("th"); + th.innerText = inputs[i+2].value;//第一个 input 是name，第二个是column，从第三个开始才是属性 + ths.push(inputs[i+2].value);//将属性的名字push进去。 + tr.appendChild(th); + } + ////alert("tableRanking:" + tableRanking); + tableContent.push([]); + tableContent[tableRanking].push([]); + tableContent[tableRanking][0] = ths;//把表头push进 + + table.appendChild(tr); + divTable.appendChild(table); + tableRanking++; //此时tableRanking等于1 + ////alert("rowRanking现在是：" + rowRanking); +} + +//清除第二个表下方的表头,divTable下面的所有东西。 +function clearSecondTableHead(){ + let divTable = document.getElementById("divTable"); + while(divTable.firstChild){ + divTable.removeChild(divTable.firstChild); + } +} + +function createSecondTableRows(){ + rowRanking++;//row加一；这是现在正在设置的行数 + tableContent[tableRanking - 1].push([]); + tableContent[tableRanking - 1][rowRanking].push([]); + let divRows = document.getElementById("divRows"); + let divTable = document.getElementById("divTable"); + + let table = divTable.childNodes[tableRanking - 1]; + let tr = document.createElement("tr"); + for(let i = 0; i < columnNumber[tableRanking - 1]; i++){ + let td = document.createElement("td"); + td.innerText = divRows.childNodes[i].value; + tableContent[tableRanking - 1][rowRanking][i] = divRows.childNodes[i].value; + if(rowRanking % 2 === 0){ + td.className = "odd"; + } + tr.appendChild(td); + } + table.appendChild(tr); +} + +//为第二个select设置新的option +function secondSelectOptionAdd(){ + let select2 = document.getElementById("select2"); + let option = document.createElement("option"); + let inputTableName = document.getElementById("inputTableName"); + tablesName.push(inputTableName);//从第一个表格开始，记录表格的名字 + option.innerText = inputTableName.value;//将option的名字变成输入值 + option.selected = "selected"; + select2.appendChild(option); +} + +function searchAndDeleteRow(){ + let divRows = document.getElementById("divRows"); + let searchValues = []; + let searchValuesTrue = []; + for(let i = 0; i < columnNumber[tableRanking - 1]; i++){ + searchValues.push(divRows.childNodes[i].value);//这是输入的搜索值 + //alert("搜索值：" + divRows.childNodes[i].value); + } + + for(let i = 0; i < rowRanking; i++){//假设rowRanking=6，不包括表头 + searchValuesTrue.push(true);//假设全部可以删除 + } + + let count = 0;//从第一行开始 + do{ + for(let i = 0; i < columnNumber[tableRanking - 1]; i++){ + if(searchValues[i] !== "" && + tableContent[tableRanking - 1][count + 1][i] !== searchValues[i]){//假如搜索值不为空并且不匹配 + searchValuesTrue[count] = false;//不会被删除 + break; + } + } + count++; + }while(count < rowRanking); + + for(let i = rowRanking - 1; i >= 0; i--){//不包括表头 + //alert("searchValuesTrue["+ i +"] = " +searchValuesTrue[i]); + } + + for(let i = rowRanking - 1; i >= 0; i--){ + if(searchValuesTrue[i]){ + tableContent[tableRanking - 1].splice(i + 1, 1);//数组解决了 + //alert("我删除了第" + (i + 1) + "行。"); + rowRanking--; + } + }//alert("现在这个表格有" + rowRanking + "行。") +} + +//删除第二个表格下面的table并展示出新的 +function deleteShowedRows(){ + //alert(rowRanking+"//////////////////////////////////////////////////////////////////////////"); + let divTable = document.getElementById("divTable"); + while(divTable.firstChild){ + divTable.removeChild(divTable.firstChild); + } + + let table = document.createElement("table"); + for(let i = 0; i <= rowRanking; i++){ + let tr = document.createElement("tr"); + for(let j = 0; j < columnNumber[tableRanking - 1]; j++){ + if(i !== 0){//i===0 + let td = document.createElement("td"); + td.innerText = tableContent[tableRanking - 1][i][j]; + tr.appendChild(td); + }else{ + let th = document.createElement("th"); + th.innerText = tableContent[tableRanking - 1][i][j]; + tr.appendChild(th); + } + } + table.appendChild(tr); + } + divTable.appendChild(table); +} + +//在第二个select中删除被选中option +function deleteTableOption(){ + let select2 = document.getElementById("select2"); + let tableToDelete = select2.selectedIndex; + //alert("tableToDelete:"+tableToDelete); + //alert("select2.children.length:"+select2.children.length); + if(tableToDelete !== 0){ + select2.removeChild(select2.children[tableToDelete]); + //alert("删掉了此option"); + } +} +//在第二个select下面 + +//////////////////////////////////////////当commit按钮被点击时///////////////////////////////////////// +/** + * 1.create table + * 2.add row + * 3.delete row + * 4.delete + */ +document.getElementById("btCommit").onclick = function(){ + let optionFirstSelect = document.getElementById("select1").selectedIndex;//获得第一个select的状态 + switch(optionFirstSelect){ + case 1://create a table + clearSecondTableHead(); + createSecondTableHead(); + secondSelectOptionAdd(); + break; + case 2://add row + createSecondTableRows(); + break; + case 3://delete row + searchAndDeleteRow(); + deleteShowedRows(); + break; + case 4://delete table + deleteTableOption(); + secondSelectEvents(); + break; + default://select one + break; + } +}; + +//第一个select发生变化时应该进行的处理 +document.getElementById("select1").onchange = function(){ + firstSelectEvents(); +}; + +//第二个select发生变化时应该进行的处理 +document.getElementById("select2").onchange = function(){ + secondSelectEvents(); +}; + + + + + + + + + +////////////////////////////等待删除的debug环节 + +// document.getElementById("rowRankingTest").onclick = function(){ +// //alert(rowRanking); +// }; +// +// document.getElementById("tableRankingTest").onclick = function(){ +// //alert(tableRanking); +// }; +// +// document.getElementById("currentTableRankingTest").onclick = function(){ +// //alert(document.getElementById("select2").selectedIndex); +// }; \ No newline at end of file diff --git a/Lab08.php b/Lab08.php index 7982419d..c416bf64 100644 --- a/Lab08.php +++ b/Lab08.php @@ -1,4 +1,6 @@ - + @@ -18,12 +20,16 @@ +
- + +
@@ -36,7 +42,7 @@
- + + + + + Chapter 12 + + + + + + + + + + + + + + +
+
+
+
+ +
+
+
+ + + + +
+ + + +
+ + +
+ All + + + Canada + + Germany + + Greece + + Italy + + United Kingdom + + United States + +
+ + + + + + +
+ + + + + + + + + \ No newline at end of file diff --git a/Lab09.php b/Lab09.php new file mode 100755 index 00000000..bbde5d6b --- /dev/null +++ b/Lab09.php @@ -0,0 +1,103 @@ + + + + + + + + Chapter 12 + + + + + + + + + + + + + + + + + + + +
+ + +
+ All + + Canada'; + sort($countries);//按照要求将序列变成升序 + foreach($countries as $country) { + $str = '' . $country . ''; + echo $str; + } + ?> + +
+ + + + +
+ + + + + + + \ No newline at end of file diff --git a/README.md b/README.md index e115b357..0dbe71c4 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ ## 当前 Lab -- [Lab08](./requirements/Lab08.md) +- [Lab09](./requirements/Lab09.md) ## 往期 Lab @@ -14,5 +14,6 @@ - [Lab05](https://www.bilibili.com/video/av21858680) - [Lab06](./requirements/Lab06.md) - [Lab07](./requirements/Lab07.md) +- [Lab08](./requirements/Lab08.md) --- diff --git a/css/bootstrap-theme.css b/css/bootstrap-theme.css old mode 100644 new mode 100755 index 2844b9b8..6528d012 --- a/css/bootstrap-theme.css +++ b/css/bootstrap-theme.css @@ -1,86 +1,64 @@ -.topHeaderRow { - background-color: #1A237E; - height: 3em; - font-size: 0.8em; - padding-top: 1em; -} -.topHeaderRow a:link { - color: #E8EAF6; -} -.topHeaderRow a:hover { - color: #40C4FF; -} - -.navbar-brand { - font-family: lobster, serif; - font-size: 32px; -} - -.description { - margin-top: 8px; - font-size: 20px; -} - -.details-list { - list-style-type: none; - padding-left: 0; -} -.details-list li { - margin: 5px 0 0 0; -} - -#tags span.label { - line-height: 26px; -} - -.caption { - text-align: center; -} -.thumbnail { - border-color: #9FA8DA; -} -.portfolio-item { - margin-top: 10px; -} - -footer { - background-color: #303F9F; - color: #E8EAF6; - font-size: 80%; -} -footer .final { - padding-top: 10px; -margin-top: 10px; - background-color: #1A237E; - text-align: center; -} - -footer hr { - margin-bottom: 0; -} - -#postJumbo { - background-image: url(../images/post-background.jpg); -} -#postJumbo h1 { - margin-top: 0; -} - -.postlist h2 { - margin-top: 0; -} - -.postlist div.details { - text-transform: uppercase; - font-size: 0.8em; -} - -.postlist p.excerpt { - margin-top: 0.4em; -} -.ratings { - margin-top: 5px; -} -.ratings img { - vertical-align: top; +.topHeaderRow { + background-color: #1A237E; + height: 3em; + font-size: 0.8em; + padding-top: 1em; +} +.topHeaderRow a:link { + color: #E8EAF6; +} +.topHeaderRow a:hover { + color: #40C4FF; +} + +.navbar-brand { + font-family: lobster, serif; + font-size: 32px; +} + +.description { + margin-top: 8px; + font-size: 20px; +} + +.details-list { + list-style-type: none; + padding-left: 0; +} +.details-list li { + margin: 5px 0 0 0; +} + +#tags span.label { + line-height: 26px; +} + +.caption { + text-align: center; +} +.thumbnail { + border-color: #9FA8DA; +} +.portfolio-item { + margin-top: 10px; +} + +footer { + background-color: #303F9F; + color: #E8EAF6; + font-size: 80%; +} +footer .final { + padding-top: 10px; +margin-top: 10px; + background-color: #1A237E; + text-align: center; +} + +footer hr { + margin-bottom: 0; +} + +.countryButtons { + margin-bottom: 10px; } \ No newline at end of file diff --git a/css/bootstrap.css b/css/bootstrap.css old mode 100644 new mode 100755 diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css old mode 100644 new mode 100755 diff --git a/css/captions.css b/css/captions.css new file mode 100755 index 00000000..ec26da5f --- /dev/null +++ b/css/captions.css @@ -0,0 +1,68 @@ +/* css image captions adapted from hasinhayder.github.io */ + + .caption-style-2{ + list-style-type: none; + margin: 0px; + padding: 0px; + + } + + .caption-style-2 li{ + float: left; + padding: 0px; + position: relative; + overflow: hidden; + } + + .caption-style-2 li:hover .caption{ + opacity: 1; + transform: translateY(-100px); + -webkit-transform:translateY(-100px); + -moz-transform:translateY(-100px); + -ms-transform:translateY(-100px); + -o-transform:translateY(-100px); + + } + + + .caption-style-2 img{ + margin: 0px; + padding: 0px; + float: left; + z-index: 4; + } + + + .caption-style-2 .caption{ + cursor: pointer; + position: absolute; + opacity: 0; + top:225px; + -webkit-transition:all 0.15s ease-in-out; + -moz-transition:all 0.15s ease-in-out; + -o-transition:all 0.15s ease-in-out; + -ms-transition:all 0.15s ease-in-out; + transition:all 0.15s ease-in-out; + + } + .caption-style-2 .blur{ + background-color: rgba(0,0,0,0.7); + height: 225px; + width: 225px; + z-index: 5; + position: absolute; + } + + .caption-style-2 .caption-text h1{ + text-transform: uppercase; + font-size: 18px; + } + .caption-style-2 .caption-text{ + z-index: 10; + color: #fff; + position: absolute; + width: 225px; + height: 225px; + text-align: center; + top:20px; + } diff --git a/delete.html b/delete.html new file mode 100644 index 00000000..2c667ff5 --- /dev/null +++ b/delete.html @@ -0,0 +1,57 @@ + + + + + delete.html + + + + + + +
+
+
+

111111Lorem ipsum dolor sit amet, consectetur adipisicing elit.la la la la la la la la lal ala la aa al a ala la ala la ll a ala la ala la l

+
+
+

2222Lorem ipsum consectetur adipisicing elit.la la la la la la la la lal ala la al a ala la ala la l +

+
+ +
+ +
+

333Ut enim ad +

+
+
+

444Lorem ipsum +

+
+
+ +
+
+

111111Lorem ipsum dolor sit amet, consectetur adipisicing elit.la la la la la la la la lal ala la aa al a ala la ala la ll a ala la ala la l

+
+
+

2222Lorem ipsum consectetur adipisicing elit.la la la la la la la la lal ala la al a ala la ala la l +

+
+ +
+ +
+

333Ut enim ad +

+
+
+

444Lorem ipsum +

+
+
+
+ + + diff --git a/functions.inc.php b/functions.inc.php index c7b6f38a..1a0a08e9 100644 --- a/functions.inc.php +++ b/functions.inc.php @@ -2,6 +2,7 @@ function generateLink($url, $label, $class) { $link = ''; + //这是一个链接； $link .= $label; $link .= ''; return $link; @@ -10,6 +11,30 @@ function generateLink($url, $label, $class) { function outputPostRow($number) { include("travel-data.inc.php"); + + $postId = 'postId' . $number; + $userId = 'userId' . $number; + $userName = 'userName' . $number; + $date = 'date' . $number; + $thumb = 'thumb' . $number; + $title = 'title' . $number; + $excerpt = 'excerpt' . $number; + $reviewsNum = 'reviewsNum' . $number; + $reviewsRating = 'reviewsRating' . $number; + + echo '
'; + echo '
'; + echo generateLink('post.php?id=' . $$postId, '' . $$title . '', ""); + echo '
'; + echo '
'; + echo '

' . $$title . '

'; + echo generateLink('user.php?id=' . $$userId, $$userName, ""); + echo '' . $$date . ''; + echo '

' . constructRating($$reviewsRating) . ' ' . $$reviewsNum .' Reviews ' . '

'; + echo '
'; + echo '

' . $$excerpt . '

'; + echo '

' . generateLink('post.php?id=' . $$postId, 'Read more', 'btn btn-primary btn-sm') . '

'; + echo '
'; } /* diff --git a/images/medium/21587937686.jpg b/images/medium/21587937686.jpg new file mode 100755 index 00000000..145ff152 Binary files /dev/null and b/images/medium/21587937686.jpg differ diff --git a/images/medium/22182041615.jpg b/images/medium/22182041615.jpg new file mode 100755 index 00000000..41490036 Binary files /dev/null and b/images/medium/22182041615.jpg differ diff --git a/images/medium/5855729828.jpg b/images/medium/5855729828.jpg new file mode 100755 index 00000000..bb5c68e1 Binary files /dev/null and b/images/medium/5855729828.jpg differ diff --git a/images/medium/5856697109.jpg b/images/medium/5856697109.jpg new file mode 100755 index 00000000..20349e54 Binary files /dev/null and b/images/medium/5856697109.jpg differ diff --git a/images/medium/6114850721.jpg b/images/medium/6114850721.jpg new file mode 100755 index 00000000..7170d99f Binary files /dev/null and b/images/medium/6114850721.jpg differ diff --git a/images/medium/6114867983.jpg b/images/medium/6114867983.jpg new file mode 100755 index 00000000..00e5003b Binary files /dev/null and b/images/medium/6114867983.jpg differ diff --git a/images/medium/6114907897.jpg b/images/medium/6114907897.jpg new file mode 100755 index 00000000..4d7ba623 Binary files /dev/null and b/images/medium/6114907897.jpg differ diff --git a/images/medium/6114960821.jpg b/images/medium/6114960821.jpg new file mode 100755 index 00000000..b5f38e13 Binary files /dev/null and b/images/medium/6114960821.jpg differ diff --git a/images/medium/6592914823.jpg b/images/medium/6592914823.jpg new file mode 100755 index 00000000..81a55aba Binary files /dev/null and b/images/medium/6592914823.jpg differ diff --git a/images/medium/6596048341.jpg b/images/medium/6596048341.jpg new file mode 100755 index 00000000..b28b8692 Binary files /dev/null and b/images/medium/6596048341.jpg differ diff --git a/images/medium/8710247776.jpg b/images/medium/8710247776.jpg new file mode 100755 index 00000000..f7485d19 Binary files /dev/null and b/images/medium/8710247776.jpg differ diff --git a/images/medium/8710513053.jpg b/images/medium/8710513053.jpg new file mode 100755 index 00000000..f9e918da Binary files /dev/null and b/images/medium/8710513053.jpg differ diff --git a/images/medium/8711645510.jpg b/images/medium/8711645510.jpg new file mode 100755 index 00000000..bc89d84e Binary files /dev/null and b/images/medium/8711645510.jpg differ diff --git a/images/medium/9495574327.jpg b/images/medium/9495574327.jpg new file mode 100755 index 00000000..c0565f5a Binary files /dev/null and b/images/medium/9495574327.jpg differ diff --git a/images/medium/9498358806.jpg b/images/medium/9498358806.jpg new file mode 100755 index 00000000..2549467a Binary files /dev/null and b/images/medium/9498358806.jpg differ diff --git a/images/medium/9504609042.jpg b/images/medium/9504609042.jpg new file mode 100755 index 00000000..a857924f Binary files /dev/null and b/images/medium/9504609042.jpg differ diff --git a/images/medium/Thumbs.db b/images/medium/Thumbs.db new file mode 100755 index 00000000..7fd03d0b Binary files /dev/null and b/images/medium/Thumbs.db differ diff --git a/images/square/21587937686.jpg b/images/square/21587937686.jpg new file mode 100755 index 00000000..1172e40c Binary files /dev/null and b/images/square/21587937686.jpg differ diff --git a/images/square/22182041615.jpg b/images/square/22182041615.jpg new file mode 100755 index 00000000..53dad0fc Binary files /dev/null and b/images/square/22182041615.jpg differ diff --git a/images/square/5855729828.jpg b/images/square/5855729828.jpg new file mode 100755 index 00000000..c5f2bbec Binary files /dev/null and b/images/square/5855729828.jpg differ diff --git a/images/square/5856697109.jpg b/images/square/5856697109.jpg new file mode 100755 index 00000000..5c03d02a Binary files /dev/null and b/images/square/5856697109.jpg differ diff --git a/images/square/6114850721.jpg b/images/square/6114850721.jpg new file mode 100755 index 00000000..767d47cc Binary files /dev/null and b/images/square/6114850721.jpg differ diff --git a/images/square/6114867983.jpg b/images/square/6114867983.jpg new file mode 100755 index 00000000..230731d1 Binary files /dev/null and b/images/square/6114867983.jpg differ diff --git a/images/square/6114907897.jpg b/images/square/6114907897.jpg new file mode 100755 index 00000000..5b9bdd5f Binary files /dev/null and b/images/square/6114907897.jpg differ diff --git a/images/square/6114960821.jpg b/images/square/6114960821.jpg new file mode 100755 index 00000000..7b6d908c Binary files /dev/null and b/images/square/6114960821.jpg differ diff --git a/images/square/6592914823.jpg b/images/square/6592914823.jpg new file mode 100755 index 00000000..574d061d Binary files /dev/null and b/images/square/6592914823.jpg differ diff --git a/images/square/6596048341.jpg b/images/square/6596048341.jpg new file mode 100755 index 00000000..59732442 Binary files /dev/null and b/images/square/6596048341.jpg differ diff --git a/images/square/8710247776.jpg b/images/square/8710247776.jpg new file mode 100755 index 00000000..502981cf Binary files /dev/null and b/images/square/8710247776.jpg differ diff --git a/images/square/8710320515.jpg b/images/square/8710320515.jpg new file mode 100755 index 00000000..f305718b Binary files /dev/null and b/images/square/8710320515.jpg differ diff --git a/images/square/8710513053.jpg b/images/square/8710513053.jpg new file mode 100755 index 00000000..86d33059 Binary files /dev/null and b/images/square/8710513053.jpg differ diff --git a/images/square/8711645510.jpg b/images/square/8711645510.jpg new file mode 100755 index 00000000..f2fadf6d Binary files /dev/null and b/images/square/8711645510.jpg differ diff --git a/images/square/9495574327.jpg b/images/square/9495574327.jpg new file mode 100755 index 00000000..73b7ce6a Binary files /dev/null and b/images/square/9495574327.jpg differ diff --git a/images/square/9498358806.jpg b/images/square/9498358806.jpg new file mode 100755 index 00000000..059cad5f Binary files /dev/null and b/images/square/9498358806.jpg differ diff --git a/images/square/9504609042.jpg b/images/square/9504609042.jpg new file mode 100755 index 00000000..2c3fff27 Binary files /dev/null and b/images/square/9504609042.jpg differ diff --git a/images/square/Thumbs.db b/images/square/Thumbs.db new file mode 100755 index 00000000..66e767f4 Binary files /dev/null and b/images/square/Thumbs.db differ diff --git a/js/data.js b/js/data.js index 6a285076..eb444f6f 100644 --- a/js/data.js +++ b/js/data.js @@ -3,4 +3,89 @@ const countries = [ { name: "United States", continent: "North America", cities: ["Boston","Chicago","New York","Seattle","Washington"], photos: ["us1.jpg","us2.jpg"] }, { name: "Italy", continent: "Europe", cities: ["Florence","Milan","Naples","Rome"], photos: ["italy1.jpg","italy2.jpg","italy3.jpg","italy4.jpg","italy5.jpg","italy6.jpg"] }, { name: "Spain", continent: "Europe", cities: ["Almeria","Barcelona","Madrid"], photos: ["spain1.jpg","spain2.jpg"] } -]; \ No newline at end of file +<<<<<<< HEAD +]; + +const divTotal=document.getElementsByTagName("div"); + +var divs=new Array(4); +var h2s=new Array(4); +var h3s=new Array(4); +var uls=new Array(4); + +for(var i=0; i<4; i++){ + //城市标签（h3） +var cities=document.createElement("h3"); +//var citiesContent=document.createTextNode("Cities"); +//cities.appendChild(citiesContent); +cities.innerHTML="Cities"; + +//照片标签 +var photosTag=document.createElement("h3"); +//var photossContent=document.createTextNode("Popular Photos"); +//photos.appendChild(photosContent); +photosTag.innerHTML="Popular Photos"; + +//按钮 +var button=document.createElement("button"); +button.innerHTML="visit"; + + //创建一个div外围的 + divs[i]=document.createElement("div"); + divs[i].className='item'; + divTotal[0].appendChild(divs[i]); + + //加上国家（h3）和大洲（h3） + h2s[i]=document.createElement("h2"); + h2s[i].innerHTML=countries[i].name; + divs[i].appendChild(h2s[i]); + + h3s[i]=document.createElement("h3"); + h3s[i].innerHTML=countries[i].continent; + divs[i].appendChild(h3s[i]); + + //创建第一个内部的div + var divInner=document.createElement("div"); + divInner.className="inner-box"; + divInner.appendChild(cities);//加上“cities”标签 + + //创建无序列表 + uls[i]=document.createElement("ul"); + + //创建无序列表里的li + for(var j=0; j>>>>>> upstream/master diff --git a/lab7-answer.html b/lab7-answer.html index 71472523..ffc8d736 100644 --- a/lab7-answer.html +++ b/lab7-answer.html @@ -1,6 +1,6 @@ - Tables + Tables TA