JavaScript数组数据无法在HTML表格中显示的问题求助

你的代码存在几个关键问题，导致数组数据无法在表格中正常显示：

1. Book对象属性访问错误 #

在addToHTML函数中，你通过library.myLibrary[i].titleColumn这类方式访问属性，但Book构造函数定义的属性是title、author、pages、read，并不存在titleColumn这类名称的属性，这会导致所有获取到的属性值都是undefined，自然无法在页面上显示内容。

2. HTML结构复用逻辑错误 #

你只在HTML中定义了一行固定的<tr id="dataContainer">，循环中反复修改这一行的<td>内容，最终只会保留最后一本书的数据；同时反复调用appendChild添加已经存在于DOM中的元素，不会生成新的表格行，只是移动元素位置，完全起不到添加多行数据的作用。

修复后的代码 #

JavaScript 代码 #

// 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(book) {
        this.myLibrary.push(book);
    }
}

// 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() {
    // 获取表格tbody作为容器
    const tbody = document.querySelector('#book-table tbody');
    // 清空原有内容，避免重复添加
    tbody.innerHTML = '';

    for (let i = 0; i < library.myLibrary.length; i++) {
        // 为每本书创建新的表格行和单元格
        const row = document.createElement('tr');
        const titleTd = document.createElement('td');
        const authorTd = document.createElement('td');
        const pagesTd = document.createElement('td');
        const readTd = document.createElement('td');

        // 正确访问Book对象的属性
        titleTd.textContent = library.myLibrary[i].title;
        authorTd.textContent = library.myLibrary[i].author;
        pagesTd.textContent = library.myLibrary[i].pages;
        readTd.textContent = library.myLibrary[i].read;

        // 将单元格添加到行中
        row.appendChild(titleTd);
        row.appendChild(authorTd);
        row.appendChild(pagesTd);
        row.appendChild(readTd);

        // 将行添加到tbody
        tbody.appendChild(row);
    }
}

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

HTML 代码 #

<!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，后续动态插入行 -->
            <tbody>
            </tbody>
        </table>
    </form>

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

关键修改说明 #

• 修正了Book对象属性的访问方式，直接使用title、author等正确的属性名。
• 移除了原有的固定数据行，改为循环创建新的表格行和单元格，确保每本书都对应独立的表格行。
• 将数据容器改为表格的tbody，统一管理所有动态生成的数据行，避免DOM元素复用导致的逻辑混乱。

内容的提问来源于stack exchange，提问作者Jabri Juhinin