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

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

javascript html css random

Javascript 如何创建一个可以随机填充数据集数据的表？,javascript,html,css,random,generator,Javascript,Html,Css,Random,Generator,我正在尝试创建一个随机电影生成器。我已经创建了一个生成器，可以在单击按钮后显示新电影。但我想创建一个表格，显示关于生成的每部电影的更多信息，即导演、类型、年份等。我想每次都将这些信息生成一个表格，并将正确的数据放在表格的正确标题下迄今为止的HTML： <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8">

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

迄今为止的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>

到目前为止：

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]

更新另一个单元格，用

yearray[randomNumber]更新另一个单元格

-您必须确保每个阵列中的电影都井然有序，并且任何地方都没有遗漏

但是，如果可能的话，更简单的解决方案是将每部电影的数据存储为一个对象。这是一个完美的用例

字符串数组将变成对象数组。你会得到一个新的随机数作为数组的索引，然后你会在索引处引用对象的属性来获取电影的细节

这里有一个简单的示例，您可以在此基础上进行构建：

const电影=[
{
标题：《星球大战第四集：新希望》，
导演：乔治·卢卡斯，
年份：'1977'，
},
{
标题：“任务：不可能III”，
导演：“J.J.艾布拉姆斯”，
年份：2006年，
},
{
标题：《蜘蛛侠2》，
导演：“山姆·雷米”，
年份：“2004年”，
}
];
const titleCell=document.getElementById（'newMovieTitle'）；
const directorCell=document.getElementById（'newMovieDirector'）；
const yearCell=document.getElementById（'newMovieYear'）；
函数getMovie（）{
const randomNumber=Math.floor（Math.random（）*movies.length）；
const newMovie=电影[随机数]；
titleCell.textContent=newMovie.title；
directorCell.textContent=newMovie.director；
yearCell.textContent=newMovie.year；
}


标题
经理
年
新电影

看起来你已经完成了90%的进度