使用JavaScript动态管理和渲染对象到HTML表格的教程-js教程-PHP中文网

使用JavaScript动态管理和渲染对象到HTML表格的教程

DDD

发布： 2025-10-22 12:55:30

原创

560人浏览过

使用javascript动态管理和渲染对象到html表格的教程

本教程详细介绍了如何使用JavaScript构建一个简单的图书管理系统，通过面向对象的方式定义图书，并将新增的图书对象动态渲染到HTML表格中。文章涵盖了数据模型定义、数据存储、DOM操作以及事件监听，旨在帮助开发者理解如何高效地管理前端数据并实时更新用户界面。

1. 引言：构建动态图书列表

在现代Web应用开发中，动态地展示和管理数据是常见的需求。本教程将以一个“我的图书馆”项目为例，演示如何利用JavaScript的面向对象特性来创建数据模型，并通过DOM操作将这些数据实时呈现在HTML表格中。我们将学习如何定义图书对象、存储这些对象，并响应用户输入来更新表格内容。

2. 核心概念与数据模型

2.1 定义图书对象

首先，我们需要一个蓝图来表示每一本书。在JavaScript中，这可以通过构造函数来实现。Book 构造函数将用于创建具有 title（书名）、author（作者）和 pages（页数）属性的图书实例。

function Book(title, author, pages) {
  this.title = title;
  this.author = author;
  this.pages = pages;
}

登录后复制

2.2 存储图书数据

为了管理多本图书，我们需要一个地方来存储这些 Book 实例。一个简单的数组 (bookArray) 是一个理想的选择。

立即学习“Java免费学习笔记（深入）”；

const bookArray = [];

登录后复制

2.3 添加图书到库中

addBookToLibrary 函数负责创建新的 Book 实例并将其添加到 bookArray 中。

function addBookToLibrary(title, author, pages) {
  const book = new Book(title, author, pages);
  bookArray.push(book);
  return book; // 返回新创建的图书对象
}

登录后复制

3. HTML结构：表单与表格

为了用户能够输入图书信息并查看列表，我们需要相应的HTML结构。

3.1 输入表单

一个简单的表单，包含书名、作者和页数的输入字段，以及一个提交按钮。

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

<form action="#" method="post">
    <label for="title">Title:</label>
    <input type="text" id="title" name="title"><br>
    <label for="author">Author:</label>
    <input type="text" id="author" name="author"><br>
    <label for="pages">Pages:</label>
    <input type="text" id="pages" name="pages"><br>
    <input type="submit" id="submit" value="Submit">
</form>

登录后复制

3.2 图书列表表格

一个用于展示图书信息的表格。为了方便JavaScript动态更新，我们为表格的 <tbody> 元素添加一个 id。

<table>
    <thead>
        <tr>
          <th>Title</th>
          <th>Author</th>
          <th>Pages</th>
        </tr>
    </thead>
    <tbody id="bookTableBody">
        <!-- 动态生成的图书行将插入到这里 -->
    </tbody>
</table>

登录后复制

注意事项： 在原始问题中，HTML结构可能存在将<tr>元素直接添加到<p>标签或表格外的非<tbody>区域的问题。为了确保HTML的语义正确性和良好的浏览器兼容性，我们强烈建议将动态生成的表格行（<tr>）插入到<table>内的<tbody>元素中。上述HTML结构已对此进行了修正。

4. 动态更新表格内容

updateTable 函数是实现动态渲染的核心。它负责清空现有表格内容，然后遍历 bookArray 中的所有图书，为每本书创建一行并将其添加到表格中。

function updateTable() {
  // 获取表格的 tbody 元素
  const tableBody = document.getElementById("bookTableBody");

  // 清空现有表格内容，防止重复添加
  tableBody.innerHTML = "";

  // 遍历 bookArray 中的每一本书
  for (const book of bookArray) {
    // 创建一个新的表格行
    const row = document.createElement("tr");

    // 使用模板字符串填充行内容
    row.innerHTML = `
      <td>${book.title}</td>
      <td>${book.author}</td>
      <td>${book.pages}</td>
    `;

    // 将新行添加到表格的 tbody 中
    tableBody.appendChild(row);
  }
}

登录后复制

5. 事件处理：响应用户输入

当用户点击“Submit”按钮时，我们需要捕获表单数据，创建新的图书对象，并更新表格。

document.getElementById("submit").addEventListener("click", function(event) {
  // 阻止表单默认提交行为，避免页面刷新
  event.preventDefault();

  // 获取表单输入的值
  const title = document.getElementById("title").value;
  const author = document.getElementById("author").value;
  const pages = document.getElementById("pages").value;

  // 校验输入（可选，但推荐）
  if (!title || !author || !pages) {
      alert("请填写所有字段！");
      return;
  }

  // 添加新书到数组
  addBookToLibrary(title, author, pages);

  // 更新表格显示
  updateTable();

  // 清空表单字段，方便下次输入
  document.getElementById("title").value = "";
  document.getElementById("author").value = "";
  document.getElementById("pages").value = "";
});

登录后复制

6. 完整代码示例

将以上所有部分组合起来，构成一个完整的HTML文件和JavaScript文件。

index.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">
    <title>My Library</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        form label {
            display: inline-block;
            width: 60px;
            margin-bottom: 5px;
        }
        form input[type="text"] {
            margin-bottom: 10px;
            width: 200px;
            padding: 5px;
        }
        form input[type="submit"] {
            padding: 8px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        form input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>

    <h1>My Library Book List</h1>
    <p>这是一个使用面向对象JavaScript构建的简单图书管理项目。</p>

    <br>

    <form action="#" method="post">
        <label for="title">Title:</label>
        <input type="text" id="title" name="title"><br>
        <label for="author">Author:</label>
        <input type="text" id="author" name="author"><br>
        <label for="pages">Pages:</label>
        <input type="text" id="pages" name="pages"><br>
        <input type="submit" id="submit" value="Submit">
    </form>       

    <br>

    <table>
        <thead>
            <tr>
              <th>Title</th>
              <th>Author</th>
              <th>Pages</th>
            </tr>
        </thead>
        <tbody id="bookTableBody">
            <!-- 动态生成的图书行将插入到这里 -->
        </tbody>
    </table>

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

</body>
</html>

登录后复制

script.js

// 存储图书对象的数组
const bookArray = [];

// Book 构造函数，用于创建图书对象
function Book(title, author, pages) {
  this.title = title;
  this.author = author;
  this.pages = pages;
}

// 将新书添加到 bookArray 中
function addBookToLibrary(title, author, pages) {
  const book = new Book(title, author, pages);
  bookArray.push(book);
  return book;
}

// 更新 HTML 表格以显示 bookArray 中的所有图书
function updateTable() {
  const tableBody = document.getElementById("bookTableBody");
  tableBody.innerHTML = ""; // 清空现有内容

  for (const book of bookArray) {
    const row = document.createElement("tr");
    row.innerHTML = `
      <td>${book.title}</td>
      <td>${book.author}</td>
      <td>${book.pages}</td>
    `;
    tableBody.appendChild(row);
  }
}

// 监听表单提交事件
document.getElementById("submit").addEventListener("click", function(event) {
  event.preventDefault(); // 阻止默认的表单提交行为

  const title = document.getElementById("title").value;
  const author = document.getElementById("author").value;
  const pages = document.getElementById("pages").value;

  if (!title || !author || !pages) {
      alert("请填写所有字段！");
      return;
  }

  addBookToLibrary(title, author, pages); // 添加新书
  updateTable(); // 更新表格显示

  // 清空表单字段
  document.getElementById("title").value = "";
  document.getElementById("author").value = "";
  document.getElementById("pages").value = "";
});

// 页面加载时初始化表格（如果 bookArray 中有预设数据）
// 例如，可以添加一些初始数据：
// addBookToLibrary("The Hobbit", "J.R.R. Tolkien", 310);
// addBookToLibrary("1984", "George Orwell", 328);
updateTable(); // 首次加载时调用，确保表格显示最新数据

登录后复制

7. 总结与最佳实践

通过本教程，我们学习了如何使用JavaScript有效地管理数据和更新UI。以下是一些关键的总结和最佳实践：

面向对象设计： 使用构造函数（如 Book）来定义数据模型，使代码更具结构性和可维护性。
数据与视图分离： 将数据（bookArray）的存储和操作与DOM的渲染逻辑（updateTable）分开，提高代码的清晰度。
动态DOM操作： 掌握 document.createElement(), element.appendChild(), element.innerHTML 等方法，它们是动态更新网页内容的基础。
事件监听： 使用 addEventListener() 捕获用户交互，并触发相应的逻辑。
阻止默认行为： 对于表单提交等会刷新页面的事件，使用 event.preventDefault() 是非常重要的。
语义化HTML： 确保HTML结构符合语义标准，例如，将表格行放入 <tbody> 中，这有助于浏览器正确解析和渲染页面，也利于可访问性。
清空与重绘： 在更新表格时，先清空现有内容 (tableBody.innerHTML = "") 再重新绘制是常见的模式，确保数据与UI同步。