JavaScript对象与HTML表格的动态绑定实践-js教程-PHP中文网

JavaScript对象与HTML表格的动态绑定实践

本教程详细讲解如何利用javascript动态管理和显示数据，特别是在html表格中展示javascript对象。我们将通过一个图书管理系统示例，学习如何使用构造函数创建对象、将对象存储在数组中，并通过dom操作实时更新表格内容，实现数据与视图的有效同步。

在现代Web开发中，动态地在网页上展示数据是常见需求。当数据以JavaScript对象的形式存在时，如何将其高效且结构化地呈现在HTML表格中，并实现实时更新，是前端开发者需要掌握的关键技能。本文将以一个简单的图书管理系统为例，详细阐述如何利用JavaScript的DOM操作功能，将图书对象动态地添加到HTML表格中。

核心概念：图书对象与数据存储

首先，我们需要定义图书的基本结构。在JavaScript中，这通常通过构造函数或类来实现。我们将创建一个Book构造函数来定义每本图书的属性，并使用一个数组来存储所有图书对象。

1. 定义Book构造函数

Book构造函数用于创建新的图书实例，它接受作者、标题和页数作为参数，并使用this关键字将这些参数绑定到新创建的对象实例上。

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

/**
 * Book构造函数
 * @param {string} author - 图书作者
 * @param {string} title - 图书标题
 * @param {number} pages - 图书页数
 */
function Book(author, title, pages) {
  this.author = author;
  this.title = title;
  this.pages = pages;
}

登录后复制

2. 添加图书到库中

addBookToLibrary函数负责创建一个新的Book对象并将其添加到bookArray中。

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

/**
 * 将新图书添加到图书数组中
 * @param {string} title - 图书标题
 * @param {string} author - 图书作者
 * @param {number} pages - 图书页数
 * @returns {Book} 新创建的图书对象
 */
function addBookToLibrary(title, author, pages) {
  const book = new Book(author, title, pages);
  bookArray.push(book);
  return book;
}

登录后复制

构建用户界面

为了让用户能够输入图书信息并查看图书列表，我们需要一个HTML表单和一个表格。

<!DOCTYPE html>
<html lang="zh-CN">
<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>我的图书馆</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: 80px;
            margin-bottom: 10px;
        }
        form input[type="text"] {
            width: 200px;
            padding: 5px;
            margin-bottom: 10px;
        }
        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>我的图书列表</h1>
    <p>这是一个使用面向对象JavaScript构建的简单图书馆项目。</p>

    <br>

    <form action="#" method="post">
        <label for="title">标题:</label>
        <input type="text" id="title" name="title" required><br>
        <label for="author">作者:</label>
        <input type="text" id="author" name="author" required><br>
        <label for="pages">页数:</label>
        <input type="number" id="pages" name="pages" required><br>
        <input type="submit" id="submit" value="添加图书">
    </form>       

    <br>

    <table>
        <thead>
            <tr>
                <th>标题</th>
                <th>作者</th>
                <th>页数</th>
            </tr>
        </thead>
        <tbody id="bookListTableBody">
            <!-- 图书数据将动态插入到这里 -->
        </tbody>
    </table>

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

</body>
</html>

登录后复制

关键点说明：

表单中的输入字段都设置了唯一的id，方便JavaScript获取其值。
表格中包含<thead>定义表头，<tbody>用于存放动态生成的图书行。<tbody>被赋予id="bookListTableBody"，这是JavaScript操作DOM的目标元素。
script.js是我们将编写JavaScript代码的文件。

动态更新表格

核心功能是updateTable函数，它负责清空现有表格内容，然后遍历bookArray中的所有图书对象，为每个对象创建一行并将其添加到表格中。

飞书多维表格

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

查看详情

/**
 * 更新HTML表格，显示bookArray中的所有图书
 */
function updateTable() {
  const tableBody = document.getElementById("bookListTableBody"); // 获取表格的tbody元素
  tableBody.innerHTML = ""; // 清空表格现有内容，准备重新渲染

  // 遍历bookArray中的每本书
  for (const book of bookArray) {
    const row = document.createElement("tr"); // 创建一个新的表格行<tr>
    row.innerHTML = `
      <td>${book.title}</td>
      <td>${book.author}</td>
      <td>${book.pages}</td>
    `; // 使用模板字符串填充行内容
    tableBody.appendChild(row); // 将新创建的行添加到表格的tbody中
  }
}

登录后复制

绑定事件与初始化

我们需要监听表单的提交事件，以便在用户点击“添加图书”按钮时，获取输入数据，创建图书对象，并更新表格。

// 当DOM内容加载完毕后执行
document.addEventListener("DOMContentLoaded", function() {
    // 为表单的提交按钮添加事件监听器
    document.getElementById("submit").addEventListener("click", function(event) {
        // 阻止表单的默认提交行为，防止页面刷新
        event.preventDefault();

        // 获取用户输入的值
        const title = document.getElementById("title").value;
        const author = document.getElementById("author").value;
        const pages = parseInt(document.getElementById("pages").value, 10); // 将页数转换为数字

        // 简单的输入验证
        if (!title || !author || isNaN(pages) || pages <= 0) {
            alert("请输入有效的图书信息（标题、作者、正整数页数）！");
            return;
        }

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

        // 更新HTML表格以显示新添加的图书
        updateTable();

        // 清空表单字段，方便用户输入下一本书
        document.getElementById("title").value = '';
        document.getElementById("author").value = '';
        document.getElementById("pages").value = '';
    });

    // 页面加载时，首次调用updateTable以显示任何初始数据（如果bookArray不为空）
    updateTable();
});

登录后复制

代码说明：

event.preventDefault()：阻止表单的默认提交行为，这非常重要，否则页面会在提交后刷新，导致动态添加的数据丢失。
获取输入值：通过document.getElementById().value获取表单字段的值。注意pages字段需要使用parseInt()转换为数字类型。
输入验证：添加了简单的验证，确保用户输入有效数据。
addBookToLibrary()：调用之前定义的函数来创建并存储新的图书对象。
updateTable()：调用此函数来重新渲染表格，显示最新的图书列表。
清空表单：在添加成功后，清空输入框，提升用户体验。
初始调用updateTable()：在页面加载时调用一次updateTable()，以确保即使bookArray最初有数据，也能正确显示。

完整代码示例

将上述JavaScript代码保存为script.js文件，并确保HTML文件中的<script src="script.js"></script>正确引用。

script.js:

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

/**
 * Book构造函数
 * @param {string} author - 图书作者
 * @param {string} title - 图书标题
 * @param {number} pages - 图书页数
 */
function Book(author, title, pages) {
  this.author = author;
  this.title = title;
  this.pages = pages;
}

/**
 * 将新图书添加到图书数组中
 * @param {string} title - 图书标题
 * @param {string} author - 图书作者
 * @param {number} pages - 图书页数
 * @returns {Book} 新创建的图书对象
 */
function addBookToLibrary(title, author, pages) {
  const book = new Book(author, title, pages);
  bookArray.push(book);
  return book;
}

/**
 * 更新HTML表格，显示bookArray中的所有图书
 */
function updateTable() {
  const tableBody = document.getElementById("bookListTableBody"); // 获取表格的tbody元素
  tableBody.innerHTML = ""; // 清空表格现有内容，准备重新渲染

  // 遍历bookArray中的每本书
  for (const book of bookArray) {
    const row = document.createElement("tr"); // 创建一个新的表格行<tr>
    row.innerHTML = `
      <td>${book.title}</td>
      <td>${book.author}</td>
      <td>${book.pages}</td>
    `; // 使用模板字符串填充行内容
    tableBody.appendChild(row); // 将新创建的行添加到表格的tbody中
  }
}

// 当DOM内容加载完毕后执行
document.addEventListener("DOMContentLoaded", function() {
    // 为表单的提交按钮添加事件监听器
    document.getElementById("submit").addEventListener("click", function(event) {
        // 阻止表单的默认提交行为，防止页面刷新
        event.preventDefault();

        // 获取用户输入的值
        const title = document.getElementById("title").value;
        const author = document.getElementById("author").value;
        const pages = parseInt(document.getElementById("pages").value, 10); // 将页数转换为数字

        // 简单的输入验证
        if (!title || !author || isNaN(pages) || pages <= 0) {
            alert("请输入有效的图书信息（标题、作者、正整数页数）！");
            return;
        }

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

        // 更新HTML表格以显示新添加的图书
        updateTable();

        // 清空表单字段，方便用户输入下一本书
        document.getElementById("title").value = '';
        document.getElementById("author").value = '';
        document.getElementById("pages").value = '';
    });

    // 页面加载时，首次调用updateTable以显示任何初始数据（如果bookArray不为空）
    updateTable();
});

登录后复制

注意事项与最佳实践

this关键字的运用： 在Book构造函数中，this指向新创建的Book实例，用于为其属性赋值。但在更新HTML表格时，我们主要通过document.getElementById()等DOM API来操作具体的HTML元素，而不是直接在HTML中通过this引用JavaScript对象。这种分离使得代码结构更清晰，易于维护。
DOM操作性能： 对于大型数据集，频繁地操作innerHTML可能会影响性能，因为它会重新解析整个子树。更优化的方法是使用document.createElement()和appendChild()来逐个添加元素，或考虑使用文档片段（DocumentFragment）来批量操作，以减少回流和重绘。对于本例中的少量数据，当前方法是完全可接受的。
语义化HTML： 确保HTML结构是语义化的。例如，使用<table>、<thead>、<tbody>、<tr>、<th>和<td>来构建表格，而不是用div或其他非表格元素来模拟。
数据验证： 在实际应用中，应加强对用户输入数据的验证，确保数据的完整性和正确性。
模块化： 随着项目规模的增长，可以将不同的功能（如数据管理、DOM渲染、事件处理）封装到不同的模块或类中，提高代码的可维护性和复用性。