列出电影及其海报答案

【问题标题】：Listing Movies + Their Posters列出电影及其海报
【发布时间】：2018-09-04 04:37:02
【问题描述】：

我正在制作一个示例网站，我必须在其中使用 JavaScript 代码来创建一个包含五个电影标题和海报的表格。我有点卡住了——我可以使用 HTML 制作表格——但是如何用 Javascript 制作表格来显示电影？我还必须包含每部电影的海报并使用 forms 和 elements 数组。

到目前为止，我有一个起始 html 页面 (start.html)，用户在其中单击一个按钮。当他们单击“是”按钮时，它会跳转到应该显示 Javascript 表的 movies.html。

start.html

<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

      <h1> Do You Like Action Movies?</h1>



<button id="yesButton" class="float-left submit-button" >Yes</button>

<script type="text/javascript">
    document.getElementById("yesButton").onclick = function () {
        location.href = "actionmovies.html";
    };
</script>





</body>
</html>

movies.html

<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<body>



My 5 Favorite Action Movies
<table border ="5">
	<tr>
	<th>Rank</th><th>Name of the movie</th><th>Poster</th>
	</tr>
	<tr>
	<td>1</td><td>Titanic</td><th><img src="titanic_poster.jpg" alt="Titanic" height="50" width="50" ></th>



	</tr>
	<tr>
		<td>2</td><td>Jurassic Park</td><th><img src="park.jpg" alt="Park"height="15" width="15"></th>
	</tr>
	<tr>
		<td>3</td><td>WestWorld</td><th><img src="park.jpg" alt="Park"height="15" width="15"></th>
	</tr>
	<tr>
		<td>4</td><td>Alien</td><th><img src="park.jpg" alt="Park"height="15" width="15"></th>
	</tr>
	<tr>
		<td>4</td><td>Terminator</td><th><img src="park.jpg" alt="Park"height="15" width="15"></th>
		
	</tr>
	</table>




</body>
</html>

【问题讨论】：

你的意思是当用户点击“是”按钮时，移动表格显示在同一页面上？
它可以显示在同一页面上，也可以显示在新页面上（剂量物质）
其实我不明白你的意思是“我如何将代码转换/更改为JS？”。另外，你为什么要这么做？
我的指令是包含用于创建包含五个电影标题和海报的表格的 JavaScript 代码
数据源是什么（即电影片名、海报图片文件名）？从服务器？或者只是存储在一个数组中？

标签： javascript html arrays forms html-table

【解决方案1】：

我只是给你一个示例代码供你参考：

<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script type="javascript">
         var movieInfo=new Array();
         movieInfo["Titanic"]="titanic_poster.jpg";
         movieInfo["Jurassic Park"]="park.jpg";
function showMovieInfo()
{
    var result=$("#result");
    var table=document.createElement("table");
    table.style.border="5";
    result.empty();
    result.html("My 5 Favorite Action Movies");
    for (var key in movieInfo)
    {
      row=table.insertRow(table.rows.length);
        cell=row.insertCell(row.cells.length);
        cell.innerHTML=key;
        img=document.createElement("img");
        img.src=movieInfo[key];
        cell=document.createElement("th");
        cell.appendChild(img);
        row.appendChild(cell); 
    }
    result.append(table);
}

    </script>   
</head>
<body>

  <h1> Do You Like Action Movies?</h1>

 <button id="yesButton" class="float-left submit-button" onclick="showMovieInfo()">Yes</button>

  <div id="result">
  </div>
</body>
</html>

【讨论】：

【解决方案2】：

以下演示将创建一个有 2 行 5 列的<table>。我知道您需要 5 行和 2 列，但我是故意这样做的，这样您就可以了解“for”循环的工作原理。请特别注意 HTML，因为它是 HTML5。 HTML 的前 3 行是 HTML4，我认为是 XML。您应该知道很多事情，如果这是一项家庭作业并且您正在为这门课程付费，请拿回您的钱。

参考文献

Template Literals

Demo中评论的细节

演示

/* Array of movie titles
|| Each title is a string, all strings are wrapped in quotes or
|| backticks (ex. "string", 'string', or `string`)
|| Each string must be delimited by a comma
*/
var titles = ["Pulp Fiction", "300", "Matrix", "Fight Club", "Saving Private Ryan"];

/* Array of movie posters
|| Each poster is a string of a url of an image
*/
var posters = ['http://t2.gstatic.com/images?q=tbn:ANd9GcRz_2nKTNlxhVtzbh29kgL3m2ebLv3TlYyzrbyqBtEUxt6mBuZ-', 'http://t1.gstatic.com/images?q=tbn:ANd9GcTBzEJIRKwczo3BJhL94O9uTH-WptCG23FPKFX8KCNpbEyPuYWR', 'http://t0.gstatic.com/images?q=tbn:ANd9GcQq3pIz-aKgkmYX1dJ-EL-AlHSPcOO7wdqRIJ5gJy9qNinXpmle', 'http://t2.gstatic.com/images?q=tbn:ANd9GcRo6_dvAhH0Q-gebUiYJVsZLj3eZuLoDsUrhK_T0dGe9EcTgcPL', 'http://t2.gstatic.com/images?q=tbn:ANd9GcR0lDhR_dXAKTm9wysp3nWu6kP0V5skJBVbCNC_Q8urAWcr4iF_'];

// Create a <table> tag
var table = document.createElement('table');

// Add that <table> tag to the <body>
document.body.appendChild(table);

/* 2 "for" loops
|| 1st loop will insert a <tr> into <table> - 2 times
|| 2nd loop will insert a <td> into <tr> - 5 times for each <tr> 
*/
/* Start i at 0; stop after the 2nd loop; increment i by 1
|| Before this loop goes on to the next loop...
*/
for (let i = 0; i < 2; i++) {
  // Insert <tr> into <table>
  var row = table.insertRow();
  
  /* ...it must go and do 5 loops here
  || Start j at 0; stop after the 5th loop; increment j by 1
  */
  for (let j = 0; j < titles.length; j++) {
    // Insert a <td> into <tr>
    var cell = row.insertCell();
    /* if this is the 1st <tr> then add a title from the 
    || titles array 
    || This will be done 5 times once for each <td>
    */
    if (i === 0) {
      cell.innerHTML = titles[j];
      
    /* Otherwise (This is the for the 2nd <tr>)
    || Parse a string (a special string called Template Literal)
    || into HTML and add a different url from the posters array
    || for the last 5 loops
    */
    } else {
      cell.innerHTML = `<img src="${posters[j]}" width="50">`;
    }
  }
}

td {
  text-align: center;
  border: 1px solid #000;
  width: 70px
}

<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <style>
    <!--CSS can go here-->
  </style>
</head>

<body>


  <script>
    <!--JavaScript can go here-->
  </script>
</body>

</html>

【讨论】：