如何遍历对象数组并将数据渲染到带CSS样式的HTML表格中

第一步：修正构造函数的属性绑定问题 #

你的Book构造函数里，ReadOrNot未通过this绑定到实例，导致无法正确读取该属性，先修复：

function Book(name, author, readOrNot) {
    this.name = name;
    this.author = author;
    this.readOrNot = readOrNot; // 用this绑定属性，统一小驼峰命名更规范
}

第二步：编写表格渲染函数 #

创建renderLibrary函数，负责清空表格内容并根据数组重新生成行，完全保留你设置的CSS样式：

function renderLibrary() {
    const tbody = document.querySelector('table tbody');
    // 清空现有内容
    tbody.innerHTML = '';
    
    // 遍历数组生成每一行数据
    myLibrary.forEach((book, index) => {
        const tr = document.createElement('tr');
        
        // 书名单元格
        const nameTd = document.createElement('td');
        nameTd.textContent = book.name;
        
        // 作者单元格
        const authorTd = document.createElement('td');
        authorTd.textContent = book.author;
        
        // 状态按钮单元格
        const statusTd = document.createElement('td');
        const statusBtn = document.createElement('button');
        statusBtn.className = 'btn rdbtn';
        statusBtn.textContent = book.readOrNot;
        // 绑定状态切换事件
        statusBtn.addEventListener('click', () => toggleReadStatus(index));
        statusTd.appendChild(statusBtn);
        
        // 删除按钮单元格
        const delTd = document.createElement('td');
        const delBtn = document.createElement('button');
        delBtn.className = 'btn delbtn';
        delBtn.textContent = 'Delete';
        // 绑定删除事件
        delBtn.addEventListener('click', () => deleteBook(index));
        delTd.appendChild(delBtn);
        
        // 组装行并添加到tbody
        tr.appendChild(nameTd);
        tr.appendChild(authorTd);
        tr.appendChild(statusTd);
        tr.appendChild(delTd);
        tbody.appendChild(tr);
    });
}

第三步：实现交互功能 #

添加状态切换和删除书籍的辅助函数：

// 切换书籍阅读状态
function toggleReadStatus(index) {
    const book = myLibrary[index];
    book.readOrNot = book.readOrNot === 'Read' ? 'Not read' : 'Read';
    // 更新表格
    renderLibrary();
}

// 删除指定书籍
function deleteBook(index) {
    myLibrary.splice(index, 1);
    // 更新表格
    renderLibrary();
}

第四步：修改添加函数并初始化渲染 #

更新addBookToLibrary，添加书籍后自动触发表格更新；同时在页面加载时渲染初始数据：

function addBookToLibrary(...arr) {
    myLibrary.push(...arr);
    // 添加后立即更新表格
    renderLibrary();
}

// 页面加载完成后渲染初始书籍
document.addEventListener('DOMContentLoaded', () => {
    addBookToLibrary(book1, book2);
});

简化后的HTML结构 #

无需手动编写静态表格内容，所有行由JS动态生成：

<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Author</td>
            <td>Status</td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <!-- 内容由JS动态生成 -->
    </tbody>
</table>

效果说明 #

• 页面加载时自动渲染myLibrary中的初始书籍
• 调用addBookToLibrary添加新书籍时，表格会自动更新，完全保留你设置的CSS样式
• 点击状态按钮可切换书籍阅读状态，点击删除按钮可移除对应书籍，表格均会实时同步更新

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