无法使用我在 JS 中的数组填充 html 中的表

Question

我无法使用 JS 中的数组填充 HTML 中的表。 我正在尝试操纵我在 JS 中拥有的数组，将其作为表格排列在 HTML 中。

此外，我只是无法掌握这一点，这只是项目的开始。

我不确定还要添加什么，所以我将依赖 lorem ipsum

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irenderit dolor in volup reprehate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

 let starWars = [ { "name": "Luke Skywalker", "height": "172", "mass": "77", "hair_color": "blond", "skin_color": "fair", "eye_color": "blue", "gender": "male", }, { "name": "C-3PO", "height": "167", "mass": "75", "hair_color": "n/a", "skin_color": "gold", "eye_color": "yellow", "gender": "n/a", }, { "name": "R2-D2", "height": "96", "mass": "32", "hair_color": "n/a", "skin_color": "white, blue", "eye_color": "red", "gender": "n/a", }, { "name": "Darth Vader", "height": "202", "mass": "136", "hair_color": "none", "skin_color": "white", "eye_color": "yellow", "gender": "male", }, { "name": "Leia Organa", "height": "150", "mass": "49", "hair_color": "brown", "skin_color": "light", "eye_color": "brown", "gender": "female", }, { "name": "Owen Lars", "height": "178", "mass": "120", "hair_color": "brown, grey", "skin_color": "light", "eye_color": "blue", "gender": "male", }, { "name": "Beru Whitesun lars", "height": "165", "mass": "75", "hair_color": "brown", "skin_color": "light", "eye_color": "blue", "gender": "female", }, { "name": "R5-D4", "height": "97", "mass": "32", "hair_color": "n/a", "skin_color": "white, red", "eye_color": "red", "gender": "n/a", }, { "name": "Biggs Darklighter", "height": "183", "mass": "84", "hair_color": "black", "skin_color": "light", "eye_color": "brown", "gender": "male", }, { "name": "Obi-Wan Kenobi", "height": "182", "mass": "77", "hair_color": "auburn, white", "skin_color": "fair", "eye_color": "blue-gray", "gender": "male", } ] //Popular tabla construirTabla(starWars) function construirTabla(data) { let table = document.getElementById('starWars') for (let i = 0; i < data.length; i++) { let row = `<tr> <td>${data[i].name}</td> <td>${data[i].height}</td> <td>${data[i].mass}</td> <td>${data[i].hair_color}</td> <td>${data[i].skin_color}</td> <td>${data[i].eye_color}</td> <td>${data[i].gender}</td> </tr>` table.innerHTML + row } }

 th { color:#fff; }

 <,DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Tablas desordenadas y ordenadas </title> <link rel="stylesheet" href="css/style:css"> <.-- <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery:min.js"></script> --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body> <table class="table table-striped"> <tr class="bg-info"> <th>Nombre</th> <th>Estatura</th> <th>Masa</th> <th>Color de pelo</th> <th>Color de Piel</th> <th>Color Ojos</th> <th>Genero</th> </tr> <tbody id="starWars"> </tbody> </table> </body> <script src="js/index.js"></script>

Answer 1

您正在尝试使用 Node.js 运行 JS。Node.js 不以 HTML 文档为中心，并且不提供document变量。

该脚本旨在由 web 浏览器执行，并根据代码中的 HTML 示例加载到带有<script>元素的网页中。

通过在 web 浏览器中打开该 HTML 文档来运行您的 JS。 不要使用 Node.js。

Answer 2

我只需要这样做，它奏效了。

> construirTabla(starWars)
    
        function construirTabla(data) {
            let table = document.getElementById('starWars')
    
            for (let i = 0; i < data.length; i++) {
                let row = `<tr>
                                <td>${data[i].name}</td>
                                <td>${data[i].height}</td>
                                <td>${data[i].mass}</td>
                                <td>${data[i].hair_color}</td>
                                <td>${data[i].skin_color}</td>
                                <td>${data[i].eye_color}</td>
                                <td>${data[i].gender}</td>
                        </tr>`
                table.innerHTML += row
            }
        }

无法使用我在 JS 中的数组填充 html 中的表

问题描述

2 个解决方案

解决方案1
1 2022-03-31 13:58:31

解决方案2
0 2022-04-07 01:15:21

无法使用我在 JS 中的数组填充 html 中的表

问题描述

2 个解决方案

解决方案1 1 2022-03-31 13:58:31

解决方案2 0 2022-04-07 01:15:21

解决方案1
1 2022-03-31 13:58:31

解决方案2
0 2022-04-07 01:15:21