Javascript 数组未显示在 HTML 表中

Question

I am trying to loop through arrays of data which then displayed in the html table.我试图遍历 arrays 的数据，然后显示在 html 表中。 I am able to create a new object and pass the data in the object to an empty array.我能够创建一个新的 object 并将 object 中的数据传递给一个空数组。 However, the problem that I am facing right now is that the arrays data is not showing in the table.但是，我现在面临的问题是表中没有显示 arrays 数据。 At the same time, there are no errors shown in the console.同时，控制台中没有显示任何错误。 I checked all info in the function addToHTML() and it supposed to be correct.I have no idea what I did wrong?我检查了 function addToHTML() 中的所有信息，它应该是正确的。我不知道我做错了什么？ The following are the javascript and html code:以下是javascript和html代码：

// Main Book object model
function Book(title, author, pages, read) {
    this.title = title;
    this.author = author;
    this.pages = pages;
    this.read = read;  
}

// Library object model
function Library() {
    this.myLibrary = [];
    
    this.addToLibrary = function(myLibrary) {
        this.myLibrary.push(myLibrary);
    }
}

// Create new book object
let book1 = new Book('Awaken the Giant Within', 'Tony Robbins', '351', 'already read');
let book2 = new Book('Think and Grow Rich', 'Napoleon Hill', '271', 'currently reading');
let book3 = new Book('Rich Dad Poor Dad', 'Robert T. Kiyosaki', '289', 'finish read');

// Create new library object
let library = new Library();

// Add books to the empty array
library.addToLibrary(book1);
library.addToLibrary(book2);
library.addToLibrary(book3);

// Function to add main Book to HTML content
function addToHTML() {
    for (let i=0; i < library.myLibrary.length ; i++ ) {

        let dataContainer = document.querySelector('#dataContainer');

        let titleColumn = document.getElementById('title');
        let authorColumn = document.getElementById('author');
        let pagesColumn = document.getElementById('pages');
        let readColumn = document.getElementById('read');

        let book_title = library.myLibrary[i].titleColumn;
        let book_author = library.myLibrary[i].authorColumn;
        let book_pages = library.myLibrary[i].pagesColumn;
        let book_read = library.myLibrary[i].readColumn;
        
        titleColumn.textContent = book_title;
        authorColumn.textContent = book_author;
        pagesColumn.textContent = book_pages;
        readColumn.textContent = book_read;

        dataContainer.appendChild(titleColumn);
        dataContainer.appendChild(authorColumn);
        dataContainer.appendChild(pagesColumn);
        dataContainer.appendChild(readColumn);
    }
}

console.log(library.myLibrary);
addToHTML();

<!DOCTYPE html>
<html lang="en">

<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">
    
    <link rel="stylesheet" href="style.css">
    <title>Book Object</title>
</head>

<body>
    <h1>Book template</h1>

    <form>
        <table id="book-table">
            <thead>
                <tr>
                    <th> Title </th>
                    <th> Author </th>
                    <th> Pages </th>
                    <th> Read </th>
                </tr>
            </thead>

            <tbody>
                <tr id="dataContainer">
                    <td id="title"></td>
                    <td id="author"></td>
                    <td id="pages"></td>
                    <td id="read"></td>
                </tr>
            </tbody>
        </table>
    </form>

    <script src="script.js"></script>
</body>
</html>

Answer 1

Needed to change the HTML + js code需要改HTML+js代码

 // Main Book object model function Book(title, author, pages, read) { this.title = title; this.author = author; this.pages = pages; this.read = read; } // Library object model function Library() { this.myLibrary = []; this.addToLibrary = function(myLibrary) { this.myLibrary.push(myLibrary); } } // Create new book object let book1 = new Book('Awaken the Giant Within', 'Tony Robbins', '351', 'already read'); let book2 = new Book('Think and Grow Rich', 'Napoleon Hill', '271', 'currently reading'); let book3 = new Book('Rich Dad Poor Dad', 'Robert T. Kiyosaki', '289', 'finish read'); // Create new library object let library = new Library(); // Add books to the empty array library.addToLibrary(book1); library.addToLibrary(book2); library.addToLibrary(book3); // Function to add main Book to HTML content function addToHTML() { for (let i=0; i < library.myLibrary.length; i++ ) { console.log(library.myLibrary) let tbody = document.querySelector('#tbdy'); let content = ` <tr> <td id="title">${library.myLibrary[i].title}</td> <td id="author">${library.myLibrary[i].author}</td> <td id="pages">${library.myLibrary[i].pages}</td> <td id="read">${library.myLibrary[i].read}</td> </tr>` tbody.innerHTML += content; } } console.log(library.myLibrary); addToHTML();

 <,DOCTYPE html> <html lang="en"> <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"> <link rel="stylesheet" href="style.css"> <title>Book Object</title> </head> <body> <h1>Book template</h1> <form> <table id="book-table"> <thead> <tr> <th> Title </th> <th> Author </th> <th> Pages </th> <th> Read </th> </tr> </thead> <tbody id="tbdy"> <tr id="dataContainer"> <td id="title"></td> <td id="author"></td> <td id="pages"></td> <td id="read"></td> </tr> </tbody> </table> </form> <script src="script.js"></script> </body> </html>

Javascript 数组未显示在 HTML 表中

问题描述

1 个解决方案

解决方案1
0 已采纳 2023-01-15 09:34:30

Javascript 数组未显示在 HTML 表中

问题描述

1 个解决方案

解决方案1 0 已采纳 2023-01-15 09:34:30

解决方案1
0 已采纳 2023-01-15 09:34:30