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

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

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

到目前为止的 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] 更新一个单元格，并使用 {{ 更新另一个单元格1}} 和另一个带有 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;
}

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

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

解决方法

相关推荐