新闻中心

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

2025-10-22
浏览次数：次
返回列表

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

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

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

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

2. 核心概念与数据模型

2.1 定义图书对象

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

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

2.2 存储图书数据

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

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 输入表单

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

<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 图书列表表格

一个用于展示图书信息的表格。为了方便J*aScript动态更新，我们为表格的

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

注意事项： 在原始问题中，HTML结构可能存在将

MarsCode MarsCode

字节跳动旗下的免费AI编程工具

MarsCode 339 查看详情 MarsCode 元素直接添加到

标签或表格外的非

区域的问题。为了确保HTML的语义正确性和良好的浏览器兼容性，我们强烈建议将动态生成的表格行（）插入到内的元素中。上述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文件和J*aScript文件。

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>这是一个使用面向对象J*aScript构建的简单图书管理项目。</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. 总结与最佳实践

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

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

    • 掌握这些技术，您将能够构建更具交互性和动态性的Web应用程序。

    以上就是使用J*aScript动态管理和渲染对象到HTML表格的教程的详细内容，更多请关注其它相关文章！


    # 如何使用  # 中山台州网站建设  # 浏阳视频营销推广企业招聘  # 学好seo技巧  # 海南网站推广概况  # 太原企业seo优化  # 湛江seo公司优选16火星  # 广东专业小红书推广营销  # 网站推广的计划范文  # seo引到微店卖货  # 什么网站更容易优化作业  # 有什么不同  # 更具  # 请填写  # 遍历  # 可选  # javascript  # 本书  # 面向对象  # 清空  # 表单  # web应用程序  # 应用开发  # html文件  # edge  # app  # 浏览器  # 前端  # js  # html  # java 


    相关栏目： 【 科技资讯46185 】 【 网络学院92790 】


    相关推荐： Composer的 archive 命令怎么用_快速打包你的PHP项目及其Composer依赖  win11专注助手在哪 Win11免打扰模式设置与自动化规则【指南】  Android Studio计算器C键逻辑错误排查与修复：条件判断优化指南  如何使 Jest 模拟函数默认抛出错误以提高测试效率  Web Components中自定义开关组件状态同步的常见陷阱与解决方案  VS Code远程开发时如何处理文件权限问题  AO3最新可访问网址 Archive of Our Own官方在线入口  Lar*el 8 多关键词数据库搜索优化实践  Mac怎么使用表情符号_Mac Emoji快捷键面板  如何在 Excel Online 和 Google 表格中更改日期格式  铁路12306官网网页端快速入口 铁路12306官方首页登录教程  b站怎么取消点赞_b站点赞取消操作方法  2025俄罗斯Yandex最新入口 官方网站地址及浏览器下载指南  J*aScript中高效管理与清空动态列表：避免循环陷阱  J*a实现学校排课程序_面向对象结构化项目示例  如何提高微信支付的安全性_微信支付安全防护与设置建议  sublime怎么格式化代码_sublime代码美化与一键排版插件配置  QQ邮箱稳定登录入口_QQ邮箱官方网站网页版使用  mcjs网页版流畅运行 mcjs低配电脑畅玩入口  2026年CSGO开箱网站推荐 CSGO开箱平台精选  《噬血代码2》新预告片发布 展示游戏剧情  漫蛙manwa官网登录界面_漫蛙漫画网页版主站入口  Promise错误处理：在catch后终止链式then执行的策略  Win11如何开启讲述人功能 Win11屏幕阅读器（讲述人）开启与关闭【教程】  QQ邮箱电脑版登录入口_QQ邮箱官方网站登录平台  在J*a中如何开发简易仓库管理与库存统计_仓库管理库存统计项目实战解析  PHP URL参数传递与500错误调试指南  在Go Martini框架中高效服务动态生成图像的实践指南  淘宝网网页版登录入口 淘宝官方网页版快捷登录  React项目中导航栏Logo自适应布局：避免裁剪与布局溢出  Win10如何清理注册表垃圾 Win10注册表维护与优化指南【慎用】  windows10怎么关闭系统提示音_windows10彻底静音设置方法  C++ vector二维数组定义_C++ vector of vector用法  蛙漫2台版漫画地址 Manwa2正版网页版链接  ArrayList与LinkedList操作复杂度详解：遍历与修改  在React函数组件中利用原生HTML5进行邮箱地址验证  动漫岛观看全网网 动漫岛在线正版动漫入口  如何优雅地扩展SprykerGlue后端API授权逻辑，使用spryker/glue-backend-api-application-authorization-connector-extension  NVIDIA股价11月重挫12%：下月有望好转 但难回5万亿美元巅峰  Linux如何构建多环境配置管理_Linux多环境配置方案  J*aScript异步迭代器_j*ascript异步遍历  age动漫网站入口 age动漫官网直接访问入口  在J*a中如何使用Exception包装底层异常_异常包装与信息传递方法说明  “音游” × “怪文书” 题材的节奏冒险游戏 《晕晕电波症候群》确定于2026年4月发售！  c++ 获取系统当前时间 c++时间戳获取方法  HTML5原生日期选择器与jQuery UI：实现日期选择器的联动与程序化控制  如何创建没有密码的Windows本地账户_跳过微软账户登录的技巧【教程】  Python多线程中正确使用sigwait处理SIGALRM信号  J*a 递归快速排序中静态变量的状态管理与陷阱  知音漫客正版漫画平台_知音漫客官网账号登录 

    上一篇：客户端授权检查的风险与服务端安全实践
    下一篇：J*aScript与HTML交互中的常见陷阱及优化实践

    搜索