时间戳

首页 > 解决方案 > 如何创建一个可以随机填充数据集中数据的表？

javascript - 如何创建一个可以随机填充数据集中数据的表？

问题描述

我正在尝试创建一个随机电影生成器。我已经创建了一个生成器，可以在单击按钮后显示新电影。但我想创建一个表格，显示生成的每部电影的更多信息，即导演、流派、年份等。我希望每次都将这些信息生成到表格中，并且正确的数据位于表中的正确标题。

数据外观示例

到目前为止的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];

}

标签： javascripthtmlcssrandomgenerator

解决方案

看起来你已经完成了 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>

推荐阅读