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

程序猿 • 2025年12月20日 22:59:03 • 好文分享 • 阅读 0

本教程详细讲解如何利用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表单和一个表格。

                我的图书馆            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;        }        我的图书列表
    这是一个使用面向对象JavaScript构建的简单图书馆项目。
    
            标题:        
        作者:        
        页数:        
                       
                                        标题                 作者                 页数

关键点说明：

表单中的输入字段都设置了唯一的id，方便JavaScript获取其值。表格中包含

定义表头，

用于存放动态生成的图书行。被赋予id=”bookListTableBody”，这是JavaScript操作DOM的目标元素。script.js是我们将编写JavaScript代码的文件。

动态更新表格

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

/** * 更新HTML表格，显示bookArray中的所有图书 */function updateTable() {  const tableBody = document.getElementById("bookListTableBody"); // 获取表格的tbody元素  tableBody.innerHTML = ""; // 清空表格现有内容，准备重新渲染  // 遍历bookArray中的每本书  for (const book of bookArray) {    const row = document.createElement("tr"); // 创建一个新的表格行    row.innerHTML = `      ${book.title}      ${book.author}      ${book.pages}    `; // 使用模板字符串填充行内容    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.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"); // 创建一个新的表格行    row.innerHTML = `      ${book.title}      ${book.author}      ${book.pages}    `; // 使用模板字符串填充行内容    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结构是语义化的。例如，使用、

、

、、

和

来构建表格，而不是用div或其他非表格元素来模拟。数据验证： 在实际应用中，应加强对用户输入数据的验证，确保数据的完整性和正确性。模块化： 随着项目规模的增长，可以将不同的功能（如数据管理、DOM渲染、事件处理）封装到不同的模块或类中，提高代码的可维护性和复用性。

总结

通过本教程，我们学习了如何使用JavaScript动态地将对象数据呈现在HTML表格中。这包括定义数据结构（Book构造函数）、管理数据集合（bookArray）、构建交互式表单、以及最关键的——使用DOM操作动态更新表格内容。掌握这些技能对于构建交互式和数据驱动的Web应用至关重要。

以上就是JavaScript对象与HTML表格的动态绑定实践的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1531605.html

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

414.1K 文章

0 评论

2 粉丝

这个人很懒，什么都没有留下～

JavaScript中的代理（Proxy）如何实现自动依赖跟踪？

上一篇 2025年12月20日 22:58:56

Elementor中Swiper JS引用返回undefined的解决方案

下一篇 2025年12月20日 22:59:08

好文分享

展望响应式布局的未来发展方向及前景

随着移动设备的普及和互联网的快速发展，网页设计和开发领域也随之发生了巨大变化。在过去，设计师需要为不同的设备和屏幕尺寸创建多个版本的网页。然而，随着响应式布局的出现，这一挑战逐渐得到了解决。响应式布局是一种网页设计和开发的方法，能够根据用户使用的设备和屏幕尺寸自动调整网页的布局和内容，以达到最佳浏…

程序猿
2025年12月24日
0000
好文分享

深度剖析程序设计中必不可少的数据类型分类

【深入解析基本数据类型：掌握编程中必备的数据分类】在计算机编程中，数据是最为基础的元素之一。数据类型的选择对于编程语言的使用和程序的设计至关重要。在众多的数据类型中，基本数据类型是最基础、最常用的数据分类之一。通过深入解析基本数据类型，我们能够更好地掌握编程中必备的数据分类。一、基本数据类型的定…

程序猿
2025年12月24日
0000
好文分享

为什么前端固定定位会发生移动问题？

前端固定定位为什么会出现移动现象？在进行前端开发时，我们经常会使用CSS中的position属性来控制元素的定位。其中，固定定位（position: fixed）是一种常用的定位方式，它可以让元素相对于浏览器窗口进行定位，保持在页面的固定位置不动。然而，有时候我们会遇到一个问题：在使用固定定位时…

程序猿
2025年12月24日
0000
好文分享

深入探讨前端开发中回流和重绘的重要性

【标题】探索回流和重绘在前端开发中的关键作用【导语】回流(reflow)和重绘(repaint)是前端开发中非常重要的概念，对于优化网页性能和提升用户体验有着至关重要的作用。本文将深入探讨回流和重绘的定义和原因，并结合具体的代码示例，让读者更好地理解它们在前端开发中的关键作用。【正文】一、回流…

程序猿
2025年12月24日
0000
CSS中绝对定位属性的解析与其在前端开发中的应用

解析绝对定位属性 CSS 的特性及其在前端开发中的应用一、绝对定位属性 CSS 的特性绝对定位是 CSS 中常用的定位方式之一，它可以让元素脱离普通文档流，并通过指定的偏移量相对于包含它的父元素或根元素进行定位。绝对定位属性具有以下几个特性：脱离文档流：绝对定位的元素脱离了普通文档流，不再占据…

程序猿
2025年12月24日 • 好文分享
0000
好文分享

前端开发中的应用与实践：使用Ajax函数

Ajax函数在前端开发中的应用与实践随着Web应用的快速发展，前端开发变得越来越重要。而Ajax作为一种前端开发技术，能够实现无需刷新页面的数据交互，成为了前端开发中不可或缺的工具。本文将介绍Ajax函数的基本原理，以及在前端开发中的应用与实践，并提供具体的代码示例。 Ajax函数的基本原理Aja…

程序猿
2025年12月24日
0000
好文分享

学会从头开始学习CSS，掌握制作基本网页框架的技巧

从零开始学习CSS，掌握网页基本框架制作技巧前言：在现今互联网时代，网页设计和开发是一个非常重要的技能。而学习CSS（层叠样式表）是掌握网页设计的关键之一。CSS不仅可以为网页添加样式和布局，还可以为用户呈现独特且具有吸引力的页面效果。在本文中，我将为您介绍一些基本的CSS知识，以及一些常用的代…

程序猿
2025年12月24日
2000
好文分享

从初学到专业：掌握这五种前端CSS框架

CSS是网站设计中重要的一部分，它控制着网站的外观和布局。前端开发人员为了让页面更加美观和易于使用，通常使用CSS框架。这篇文章将带领您了解这五种前端CSS框架，从入门到精通。 Bootstrap Bootstrap是最受欢迎的CSS框架之一。它由Twitter公司开发，具有可定制的响应式网格系统、…

程序猿
2025年12月24日
2000
好文分享

揭秘Web标准涵盖的语言：了解网页开发必备的语言范围

在当今数字时代，互联网成为了人们生活中不可或缺的一部分。作为互联网的基本构成单位，网页承载着我们获取和分享信息的重要任务。而网页开发作为一门独特的技术，离不开一些必备的语言。本文将揭秘Web标准涵盖的语言，让我们一起了解网页开发所需的语言范围。首先，HTML（HyperText Markup La…

程序猿
2025年12月24日
0000
好文分享

克服害怕做选择的恐惧症：这五个前端CSS框架将为你解决问题

选择恐惧症？这五个前端CSS框架能帮你解决问题近年来，前端开发者已经进入了一个黄金时代。随着互联网的快速发展，人们对于网页设计和用户体验的要求也越来越高。然而，要想快速高效地构建出漂亮的网页并不容易，特别是对于那些可能对CSS编码感到畏惧的人来说。所幸的是，前端开发者们早已为我们准备好了一些CSS…

程序猿
2025年12月24日
2000
好文分享

揭开Web开发的语言之谜：了解构建网页所需的语言有哪些？

Web标准中的语言大揭秘：掌握网页开发所需的语言有哪些？随着互联网的快速发展，网页开发已经成为人们重要的职业之一。而要成为一名优秀的网页开发者，掌握网页开发所需的语言是必不可少的。本文将为大家揭示Web标准中的语言大揭秘，介绍网页开发所需的主要语言。 HTML（超文本标记语言）HTML是网页开发的…

程序猿
2025年12月24日
4000
好文分享

常用的网页开发语言：了解Web标准的要点

了解Web标准的语言要点：常见的哪些语言应用在网页开发中？随着互联网的不断发展，网页已经成为人们获取信息和交流的重要途径。而要实现一个高质量、易用的网页，离不开一种被广泛接受的Web标准。Web标准的制定和应用，涉及到多种语言和技术，本文将介绍常见的几种语言在网页开发中的应用。首先，HTML（H…

程序猿
2025年12月24日
0000
好文分享

网页开发中常见的Web标准语言有哪些？

探索Web标准语言的世界：网页开发中常用的语言有哪些？在现代社会中，互联网的普及程度越来越高，网页已成为人们获取资讯、娱乐、交流的重要途径。而网页的开发离不开各种编程语言的应用和支持。在这个虚拟世界的网络，有许多被广泛应用的标准化语言，用于为用户提供优质的网页体验。本文将探索网页开发中常用的语言，…

程序猿
2025年12月24日
0000
好文分享

深入探究Web标准语言的范围，涵盖了哪些语言？

Web标准是指互联网上的各个网页所需遵循的一系列规范，确保网页在不同的浏览器和设备上能够正确地显示和运行。这些标准包括HTML、CSS和JavaScript等语言。本文将深入解析Web标准涵盖的语言范围。首先，HTML（HyperText Markup Language）是构建网页的基础语言。它使…

程序猿
2025年12月24日
0000
好文分享

深入理解CSS框架与JS之间的关系

深入理解CSS框架与JS之间的关系在现代web开发中，CSS框架和JavaScript (JS) 是两个常用的工具。CSS框架通过提供一系列样式和布局选项，可以帮助我们快速构建美观的网页。而JS则提供了一套功能强大的脚本语言，可以为网页添加交互和动态效果。本文将深入探讨CSS框架和JS之间的关系，…

程序猿
2025年12月24日
0000
好文分享

项目实践：如何结合CSS和JavaScript打造优秀网页的经验总结

项目实践：如何结合CSS和JavaScript打造优秀网页的经验总结随着互联网的快速发展，网页设计已经成为了各行各业都离不开的一项技能。优秀的网页设计可以给用户留下深刻的印象，提升用户体验，增加用户的黏性和转化率。而要做出优秀的网页设计，除了对美学的理解和创意的运用外，还需要掌握一些基本的技能，如…

程序猿
2025年12月24日
2000
好文分享

前端开发必备：掌握CSS技巧的项目经验分享

前端开发是近年来非常热门的职业方向之一，随着互联网的发展和技术的进步，前端开发人员的需求也越来越大。在前端开发中，掌握CSS技巧是非常重要的一部分，能够让网页呈现出更好的视觉效果和用户体验。本文将分享一些我在项目经验中学到的CSS技巧，希望对正在学习或者即将从事前端开发的同学有所帮助。首先，我想分…

程序猿
2025年12月24日
0000
好文分享

CSS 超链接属性解析：text-decoration 和 color

CSS 超链接属性解析：text-decoration 和 color 超链接是网页中常用的元素之一，它能够在不同页面之间建立连接。为了使超链接在页面中有明显的标识和吸引力，CSS 提供了一些属性来调整超链接的样式。本文将重点介绍 text-decoration 和 color 这两个与超链接相关的…

程序猿
2025年12月24日
0000
好文分享

is与where选择器：提升前端编程效率的秘密武器

is与where选择器：提升前端编程效率的秘密武器在前端开发中，选择器是一种非常重要的工具。它们用于选择文档中的元素，从而对其进行操作和样式设置。随着前端技术的不断发展，选择器也在不断演化。而其中，is与where选择器成为了提升前端编程效率的秘密武器。 is选择器是CSS Selectors L…

程序猿
2025年12月24日
0000
好文分享

前端技巧分享：使用CSS3 fit-content让元素水平居中

前端技巧分享：使用CSS3 fit-content让元素水平居中在前端开发中，我们常常会遇到需要将某个元素水平居中的情况。使用CSS3的fit-content属性可以很方便地实现这个效果。本文将介绍fit-content属性的使用方法，并提供代码示例。 fit-content属性是一个相对于元素父…

程序猿
2025年12月24日
0000