我正在尝试创建一个随机电影生成器。我已经创建了一个生成器，可以在单击按钮后显示新电影。但我想创建一个表格，显示生成的每部电影的更多信息，即导演、类型、年份等。我希望每次都将这些信息生成一个表格中，并将正确的数据放在表格的正确标题下。
数据外观示例
迄今为止的HTML：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="movie.css">
<title>Movie Generator</title>
</head>
<body><div class="container">
<div class="row flex-top justify-content-center">
<header class="border shadow">
<h1>Movie Generator</h1>
</header>
</div>
<div class="row flex-top justify-content-center">
<button id="button" class="btn-large new-movie-button" onClick="getMovie()">New Movie</button>
</div>
<div class="row justify-content-center">
<main class="card">
<p class="movie card-body center" id="newMovieSection"></p>
</main>
</div>
</div>
<script src="movie.js"></script>
</body>
</html>
到目前为止的CSS：
header {
padding: 2em;
background-color: black;
margin-top: 2em;
text-align: center;
color: white;
}
.movie {
font-size: 2em;
}
.btn-large {
margin: 0.5em
}
.card {
text-align: center;
width: 45em;
}
.new-movie-button{
background-color: rgb(77, 87, 97);
border-color: black;
color: white;
}
button:hover {
background-color: rgb(142, 155, 168);
color: white;
}
到目前为止的JavaScript：
var movies = [
"Twilight",
"The Twilight Saga: New Moon",
"The Twilight Saga: Eclipse",
"The Twilight Saga: Breaking Dawn - Part 1",
"The Twilight Saga: Breaking Dawn - Part 2",
"Star Wars: Episode IV - A New Hope ",
"Star Wars: Episode V - The Empire Strikes Back",
"Star Wars: Episode VI - Return of the Jedi",
"Star Wars: Episode I - The Phantom Menace",
"Star Wars: Episode II - Attack of the Clones",
"Star Wars: Episode III - Revenge of the Sith",
"Star Wars: Episode VII - The Force Awakens ",
"Star Wars: Episode VIII - The Last Jedi ",
"Star Wars: The Rise of Skywalker",
"Rogue One: A Star Wars Story",
"Iron Man ",
"Iron Man 2",
"Iron Man 3",
"The Incredible Hulk",
"Thor",
"Thor: The Dark World",
"Thor: Ragnarok",
"Captian America: The First Avenger ",
"Captian America: The Winter Soldier",
"Captian America: Civil War",
"Avengers Assemble ",
"Avengers: Age of Ultron ",
"Avengers: Infinity War",
"Avengers: Endgame",
"Black Panther ",
"Doctor Strange ",
"Ant-Man",
"Ant-Man and the Wasp",
"Spider-Man: Homecoming ",
"Spider-Man: Far from Home",
"Guardians of the Galaxy ",
"Guardians of the Galaxy Vol.2",
"Harry Potter and the Philosopher's Stone ",
"Harry Potter and the Chamber of Secrets ",
"Harry Potter and the Prisoner of Azkaban ",
"Harry Potter and the Goblet of Fire ",
"Harry Potter and the Order of the Phoenix ",
"Harry Potter and the Half-Blood Prince ",
"Harry Potter and the Deathly Hallows: Part 1 ",
"Harry Potter and the Deathly Hallows: Part 2",
"The Lord of the Rings: The Fellowship of the Ring ",
"The Lord of the Rings: The Two Towers ",
"The Lord of the Rings: The Return of the King ",
"The Hobbit: An Unexpected Journey ",
"The Hobbit: The Desolation of Smaug ",
"The Hobbit: The Battle of Five Armies ",
"Spider-Man",
"Spider-Man 2",
"Spider-Man 3",
"Mission: Impossible ",
"Mission: Impossible II",
"Mission: Impossible III",
"Mission: Impossible - Ghost Protocol",
"Mission: Impossible - Rogue Nation ",
"Mission: Impossible - Fallout ",
"Rise of the Planet of the Apes",
"Dawn of the Planet of the Apes",
"War for the Planet of the Apes",
"The Bourne Identity ",
"The Bourne Supremacy",
"The Bourne Ultimatum ",
"The Bourne Legacy",
"Jason Bourne ",
"The Amazing Spider-Man ",
"The Amazing Spider-Man 2",
"Jurassic Park",
"The Lost World: Jurassic Park",
"Jurassic Park III",
"Jurassic World",
"Jurassic World: Fallen Kingdom",
"Jumanji",
"Jumanji: Welcome to the Jungle",
"Jumanji: The Next Level",
"The Fast and the Furious ",
"2 Fast 2 Furious",
"The Fast and the Furious: Tokyo Drift ",
"Fast & Furious",
"Fast & Furious 5",
"Fast & Furious 6",
"Fast & Furious 7",
"Fast & Furious 8",
"Fast & Furious: Hobbs & Shaw",
"Transformers",
"Transformers: Revenge of the Fallen",
"Transformers: Dark of the Moon",
"Transformers: Age of Extinction",
"Transformers: The Last Knight ",
"X-Men",
"X2",
"X-Men: The Last Stand",
"X-Men Origins: Wolverine ",
"X-Men: First Class",
"The Wolverine ",
"X-Men: Days of Future Past",
"Logan",
]
function getMovie() {
var randomNumber = Math.floor(Math.random() * movies.length);
document.getElementById("newMovieSection").innerHTML = movies[randomNumber];
}
看起来你已经完成了90%的工作。
你所需要做的就是用一个按照你想要的方式组织的表格替换你的段落，然后你需要每次点击按钮都更新多个表格单元格，而不是只更新一个段落。
如何更新表格单元格取决于数据的存储方式。
例如，如果一个数组中有所有的标题，另一个数组里有所有的导演，第三个数组里的年份，那么你必须用titlesArray[randomNumber]更新一个单元格，用directorsArray[randomNumber]更新另一个单元格和用yearsArray[randomNumber]更新另一单元格——你必须确保每个数组中的电影都是有序的，任何地方都没有丢失。
然而，如果可能的话，更简单的解决方案是将每部电影的数据存储为一个对象。这是一个完美的用例。
字符串数组将简单地变成对象数组。您将为数组的索引获取一个新的随机数，然后您将引用该索引处对象的属性来获取该电影的详细信息。
这里的简单例子，你可以建立在：
const movies = [
{
title: 'Star Wars Episode IV: A New Hope',
director: 'George Lucas',
year: '1977',
},
{
title: 'Mission: Impossible III',
director: 'J. J. Abrams',
year: '2006',
},
{
title: 'Spider-Man 2',
director: 'Sam Raimi',
year: '2004',
}
];
const titleCell = document.getElementById('newMovieTitle');
const directorCell = document.getElementById('newMovieDirector');
const yearCell = document.getElementById('newMovieYear');
function getMovie() {
const randomNumber = Math.floor(Math.random() * movies.length);
const newMovie = movies[randomNumber];
titleCell.textContent = newMovie.title;
directorCell.textContent = newMovie.director;
yearCell.textContent = newMovie.year;
}<table>
<thead>
<tr>
<th>Title</th>
<th>Director</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td id="newMovieTitle"></td>
<td id="newMovieDirector"></td>
<td id="newMovieYear"></td>
</tr>
</tbody>
</table>
<button id="button" class="btn-large new-movie-button" onClick="getMovie()">New Movie</button>