原创投稿
  1. 创想鸟首页
  2. 用户投稿

HTML中表格动态添加的方法

程序猿 • • 用户投稿

总结：以上就是本篇文的全部内容html中表格动态添加的方法，希望能对大家的学习有所帮助。 相关推荐：

具体代码如下所示：

      Table                
                                
                      First Name                      Last Name                                         
                                              
                      张                      三                                                               
                        
                function add() {          var trObj = document.createElement("tr");          trObj.id = new Date().getTime();          trObj.innerHTML = " ";          document.getElementById("tb").appendChild(trObj);      }      function del(obj) {          var trId = obj.parentNode.parentNode.id;          var trObj = document.getElementById(trId);          document.getElementById("tb").removeChild(trObj);      }

      上面的代码中，首先在body中构造了一个table，为了方便后续的操作，我们给table添加了thead 和 tbody 标签，thead标签标示的是表格头，tbody标签标示的是表格主体。

      示例中的表格，共有三列，第一列 first name，第二列 last name，第三列为操作列。

      操作列中，包含两个操作，一个是给表格添加行，一个是删除当前行。添加行和删除行的操作分别绑在两个按钮上，点击按钮时，触发相应的添加行/ 删除行 操作。

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

添加行方法

function add() {          var trObj = document.createElement("tr");          trObj.id = new Date().getTime();          trObj.innerHTML = " ";          document.getElementById("tb").appendChild(trObj);      }

第一行，创建tr元素，即创建一个表格行。

第二行，trObj.id = new Date().getTime(); 给改行添加id 属性，并给属性赋值，取当前系统的毫秒数，这个主要是删除的时候需要。

第三行，trObj.innerHTML = "

“; 给表格行赋值，通过innerHTMML属性，设置

标签和 标签间的html代码内容，也就是要添加的行内容。

第四行，document.getElementById("tb").appendChild(trObj); 将创建好的表格行添加到表格主体中。

删除行方法

function del(obj) {      var trId = obj.parentNode.parentNode.id;      var trObj = document.getElementById(trId);      document.getElementById("tb").removeChild(trObj);  }

删除方法中传递了一个参数，在添加行方法中，我们可以看到删除方法del 中传递了this参数，页面代码中的this指代的是当前的HTML元素，即this所在的域。

第一行，var trId = obj.parentNode.parentNode.id; 获取当前元素的父节点的父节点的id，即要删除的行的id 。

第二行，var trObj = document.getElementById(trId); 获取要删除的行元素。

第三行，document.getElementById("tb").removeChild(trObj); 在表格主体中删除该行。

瑕疵

上面的代码基本实现了动态给表格增加行和删除行的功能，但是代码还有瑕疵，主要有这么两点：

1  表格在增加行前和增加行后，表格宽度发生变化

增加行前

HTML中表格动态添加的方法

增加行后

HTML中表格动态添加的方法

增加行后，表格列变宽了

2  浏览器默认打开的页面中文出现乱码

HTML中表格动态添加的方法

需要 设置字符编码修改页面编码格式后才能正常显示

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

相关推荐：

HTML中的超级链接标签

html标签中lang的作用

用html中标签制作表单实例

以上就是HTML中表格动态添加的方法的详细内容，更多请关注创想鸟其它相关文章！

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年12月21日 17:57:17
如何在HTML中使用JavaScript
下一篇 2025年12月21日 17:57:43

相关推荐

  • VSCode怎么打出基本代码_VSCode使用代码片段快速生成基础结构教程 用户投稿

    VSCode怎么打出基本代码_VSCode使用代码片段快速生成基础结构教程

    VSCode通过内置、自定义和扩展三种方式实现代码片段快速生成，提升开发效率。使用内置片段如html:5或log可一键生成常用结构；通过“Configure User Snippets”创建自定义片段，如用rfc生成React函数组件，并利用$1、$2等占位符实现光标跳转与同步编辑；安装高评分扩展如…

    程序猿的头像 程序猿
    2026年8月30日
    200
  • vivo浏览器怎么找到离线网页_vivo浏览器已保存离线网页的查看路径 用户投稿

    vivo浏览器怎么找到离线网页_vivo浏览器已保存离线网页的查看路径

    可通过“我的收藏”、下载记录或文件管理器查找vivo浏览器保存的离线网页。首先打开vivo浏览器，点击底部菜单进入“我的收藏”，查找带“已离线”标签的网页；若未找到，进入“下载记录”查看类型为网页或HTML的项目；若仍无法定位，可打开文件管理器，在内部存储的Android/data/com.bbk.…

    程序猿的头像 程序猿
    2026年8月30日
    200
  • VSCode怎么把Markdown保存_VSCode导出和转换Markdown文件格式教程 用户投稿

    VSCode怎么把Markdown保存_VSCode导出和转换Markdown文件格式教程

    答案是使用自动保存、Git版本控制和插件如Markdown PDF与Pandoc可高效保存并转换Markdown；通过相对路径管理图片、自定义CSS或Pandoc模板可避免导出格式错乱。 VSCode保存Markdown文件非常直接，它有自动保存功能，手动Ctrl+S也随时可用。至于导出和转换，这通…

    程序猿的头像 程序猿
    2026年8月30日
    100
  • mPDF 中单页内容输出的挑战与策略 用户投稿

    mPDF 中单页内容输出的挑战与策略

    在使用 mPDF 将 HTML 导出为 PDF 时，用户常希望所有内容能保持在单个页面内。然而，mPDF 对自动分页的控制能力有限，且不提供“孤行”或“孤儿行”保护机制。这意味着，若内容自然超出页面边界，mPDF 将自动分页，难以强制所有内容在单页显示。理解其分页机制的局限性是实现预期输出的关键。 …

    程序猿的头像 程序猿
    2026年8月29日
    200
  • 天猫店铺首页装修步骤是什么？天猫店铺首页装修教程 用户投稿

    天猫店铺首页装修步骤是什么？天猫店铺首页装修教程

    提升天猫店铺形象需从首页装修入手，首先进入商家后台选择PC端首页装修，接着选用匹配类目的模板快速美化页面，有设计能力者可自定义全屏海报并嵌入热区代码，随后添加轮播图、商品推荐、店招等核心模块优化信息布局，最后切换至手机端调整排版与组件确保移动端体验流畅。 如果您希望提升天猫店铺的专业形象和用户体验，…

    程序猿的头像 程序猿
    2026年8月29日
    100
  • VSCode怎么编写地图定位_VSCode集成地图API开发位置服务应用教程 用户投稿

    VSCode怎么编写地图定位_VSCode集成地图API开发位置服务应用教程

    答案是集成地图API实现定位需选择服务商、引入SDK、初始化地图并调用定位功能。具体为：在VSCode中创建Web项目，引入百度等地图API的SDK，通过HTML页面加载地图容器，使用JavaScript初始化地图实例，并结合浏览器Geolocation API或地图SDK自带控件获取位置，最后添加…

    程序猿的头像 程序猿
    2026年8月29日
    100

  • Mac+IDEA+百度富文本UEditor

    Mac+IDEA+百度富文本UEditorMac+IDEA+百度富文本UEditorMac+IDEA+百度富文本UEditorMac+IDEA+百度富文本UEditor

    最近，我在项目中需要嵌入一个富文本编辑器，考虑到百度ueditor的强大功能，决定使用它。然而，从%ignore_a_1%+eclipse环境转到mac+idea后，遇到了几个问题。经过一番努力，终于解决了这些问题，现分享我的经验。 环境：Mac + IDEA + UEditor 基于 Maven+…

    程序猿的头像 程序猿
    2026年8月29日 • 用户投稿
    200

  • 入门爬虫，不讲道理，只摆问题

    入门爬虫，不讲道理，只摆问题入门爬虫，不讲道理，只摆问题入门爬虫，不讲道理，只摆问题入门爬虫，不讲道理，只摆问题

    其实我也算是入门爬虫，目前也还有很多东西没有吃透，比如很多人入门选择使用的正则式我就没记清楚，对于很多反扒也并不算特别深入。但这并不影响我学习爬虫的信心和兴趣。。。没办法，必须要学啊。很多数据我不能跪着求别人给，因为别人不会给。。。被逼着学习爬虫，希望我的学习能有好结果吧 import json i…

    程序猿的头像 程序猿
    2026年8月28日 • 用户投稿
    100
  • 避免 jQuery AJAX POST 请求重复提交的策略与实践 用户投稿

    避免 jQuery AJAX POST 请求重复提交的策略与实践

    本文探讨了在使用 jQuery AJAX 进行 POST 请求时，如何有效避免因事件监听器、快速点击或意外行为导致的重复提交问题。我们将介绍一种基于状态标志的解决方案，通过控制请求的执行时机，确保数据提交的准确性和一致性，并提供相应的代码示例和最佳实践建议，以优化用户体验和系统稳定性。 问题描述：A…

    程序猿的头像 程序猿
    2026年8月28日
    200

  • 推荐几款好用的文本编辑器

    推荐几款好用的文本编辑器推荐几款好用的文本编辑器推荐几款好用的文本编辑器推荐几款好用的文本编辑器

    作为程序员，编写和查看代码是日常工作的重要部分。今天，我将为大家介绍几款实用的文本编辑器。 Sublime Text 是一款轻量、简洁、高效且跨平台的编辑器。 Sublime Text的特色功能包括： 出色的扩展功能，官方称为安装包(Package)。它没有传统的右侧滚动条，而是用代码缩略图代替，这…

    程序猿的头像 程序猿
    2026年8月28日 • 用户投稿
    300
  • VSCode怎么建立外部样式_VSCode链接外部CSS文件方法教程 用户投稿

    VSCode怎么建立外部样式_VSCode链接外部CSS文件方法教程

    首先创建style.css文件并编写样式，然后在HTML的head中通过link标签引入，最后用Live Server插件实现实时预览；若样式未生效，需检查路径、语法、优先级、缓存及HTML结构，并利用开发者工具调试；大型项目应按模块或页面拆分CSS，结合预处理器、BEM规范和CSS Reset提升…

    程序猿的头像 程序猿
    2026年8月28日
    200
  • React前端与PHP后端联调：高效定位与解决PHP错误 用户投稿

    React前端与PHP后端联调：高效定位与解决PHP错误

    本文针对React前端与PHP后端集成时，PHP错误难以追踪的问题，提供了两种高效调试策略。核心在于通过配置PHP服务器端错误日志，将详细错误信息记录到文件，以及利用浏览器开发者工具的网络面板直接检查API的原始响应，从而避免JSON解析错误并快速定位后端问题。 问题剖析：React前端下PHP错误…

    程序猿的头像 程序猿
    2026年8月28日
    100
  • Win7如何更改默认浏览器? 用户投稿

    Win7如何更改默认浏览器?

    浏览器是一种能够展示网页服务器或文件系统中的html文档内容，并支持用户与之互动的软件。许多用户的电脑上都安装了多个浏览器，但很少有人了解如何设定默认浏览器。今天，小编就为大家讲解一下如何设置默认浏览器。 如何更改IE浏览器的默认设置 打开IE浏览器，在主界面上找到并点击工具菜单，随后在下拉列表中选…

    程序猿的头像 程序猿
    2026年8月28日
    100

  • Spark vs. Flink — 核心技术点

    Spark vs. Flink — 核心技术点Spark vs. Flink — 核心技术点Spark vs. Flink — 核心技术点Spark vs. Flink — 核心技术点

    引言 Apache Spark 是一个综合性且高效的分布式计算引擎，兼具批处理和流计算能力，利用内存进行并行计算。官方数据表明，Spark的内存计算速度比MapReduce快100倍。作为当前最流行的计算框架，Spark已展现出其卓越的性能。 Apache Flink 是一个分布式大数据处理引擎，提…

    程序猿的头像 程序猿
    2026年8月28日 • 用户投稿
    400
  • b站视频怎么镜像翻转_B站视频画面镜像处理技巧 用户投稿

    b站视频怎么镜像翻转_B站视频画面镜像处理技巧

    1、使用B站手机客户端可直接开启镜像翻转：进入全屏播放后点击右上角三个点，选择【镜像翻转】即可实时切换画面方向。2、通过B站网页版HTML5播放器也可实现：在电脑端播放视频时点击设置齿轮，开启【镜像画面】开关即生效。3、如需永久保存镜像效果，可借助剪映等剪辑软件对视频进行水平翻转处理后再导出使用。 …

    程序猿的头像 程序猿
    2026年8月28日
    100
  • PHP文件上传与数据库记录：常见问题排查与最佳实践 用户投稿

    PHP文件上传与数据库记录：常见问题排查与最佳实践

    本教程旨在解决PHP文件上传成功但数据库记录失败的常见问题。我们将深入分析代码中的逻辑错误，提供有效的调试策略，包括SQL语句检查和错误报告，并推荐使用预处理语句以增强安全性与稳定性，确保文件上传与数据库操作同步完成。 引言 在web开发中，文件上传是一个常见且重要的功能。它通常涉及两个主要步骤：将…

    程序猿的头像 程序猿
    2026年8月27日
    200
  • GreatSQL 8.4.4-4 GA (2025-10-15) 用户投稿

    GreatSQL 8.4.4-4 GA (2025-10-15)

    GreatSQL 8.4.4-4 GA (2025-10-15) 版本信息 发布时间：2025年10月15日 版本号：8.4.4-4, Revision d73de75905d 下载链接：https://www.php.cn/link/b68f0b79fc8f10966e8642318429eab6…

    程序猿的头像 程序猿
    2026年8月27日
    300
  • VSCode怎么运行多个HTML_VSCode同时启动多个网页开发调试教程 用户投稿

    VSCode怎么运行多个HTML_VSCode同时启动多个网页开发调试教程

    答案：在VSCode中同时运行和调试多个HTML文件可通过Live Server插件、http-server命令行工具或配置launch.json实现；推荐使用http-server配合多根工作区进行预览，或通过launch.json的compounds功能组合多个调试配置，实现多页面协同调试，提升…

    程序猿的头像 程序猿
    2026年8月27日
    100
  • VBA与数据库——添加新的数据库驱动程序 用户投稿

    VBA与数据库——添加新的数据库驱动程序

    在前面provider字符串编写中，我们已经探讨了如何查找电脑上安装的数据库驱动程序。现在，让我们继续了解如何添加新的数据库驱动程序。 在使用Windows系统上的Office Excel时，Access数据库通常是非常方便的选择。然而，由于我在使用Access时遇到了一些问题，我转而使用了SQLi…

    程序猿的头像 程序猿
    2026年8月27日
    100
  • PHP函数库设计原则是什么_PHP函数库设计最佳实践 用户投稿

    PHP函数库设计原则是什么_PHP函数库设计最佳实践

    设计PHP函数库需遵循命名清晰、单一职责、输入验证、文档化等原则。函数名应动词开头，如sendEmail()；每个函数只做一件事；参数需校验并抛出异常；添加PHPDoc注释；避免全局依赖；返回值保持一致。 设计PHP函数库时，核心目标是提升代码的可重用性、可维护性和易用性。良好的函数库不仅让开发者使…

    程序猿的头像 程序猿
    2026年8月27日
    100

发表回复

登录后才能评论
关注微信