投稿获客
广告
广告 广告 广告
广告 广告 广告 广告
广告 █ 推荐【菠萝云】香港16G内存99元 【CDNCloud】极速、安全可靠的加速体验 广告位联系QQ：253000106 【UStat】免费网站统计平台 SSL证书低至2折 单域名36元起 免费测试！海总一手APK免杀处理 广告位联系QQ：253000106 CDN 服务器 反炸 劫持 域名屏蔽 【UStat】专业网站统计平台 域名注册：海量域名快速注册 安卓免杀 谷歌报毒 封装 苹果签名 广告位联系QQ：253000106 【域名被劫持污染如何处理】 安卓免杀★超级签★封装★谷歌屏蔽 广告位联系QQ：253000106

*本站广告为第三方投放，如发生纠纷，请向本站索取第三方联系方式沟通

  1. 创想鸟首页
  2. 好文分享

HTML中表格动态添加的方法

程序猿 • • 好文分享 • 阅读 0

总结：以上就是本篇文的全部内容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

关于作者

程序猿的头像

程序猿签约作者

382.2K 文章
0 评论
1 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年12月21日 17:57:17
下一篇 2025年12月21日 17:57:43

相关推荐

  • HTML使用表格写首页

    本篇文章主要介绍如何利用表格写网站首页，简单的使用table标签与其子标签实现图片汉字的插入，在此也可以使用嵌套的方式完成。感兴趣的小伙伴参考下。 代码展示 HTML表格练习之大学首页信息 @@##@@ 网站首页 学校概况 教学单位 机构设置 人才培养 学术研究 招生就业 合作交流 校园生活 @@#…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000

  • HTML如何关闭当前网页

    本片文章主要介绍html如何关闭当前网页以及鼠标特效，希望可以帮到大家。 代码： Document function shut(){ window.opener=null; window.open(”,’_self’); window.close(); } 相关推荐： js实现关闭网页的代码 立即…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000

  • HTML入门基础

    本篇文章主要介绍HTML入门基础，感兴趣的朋友参考下，希望对大家有所帮助。 标记、标签、元素 标签和元素通常是描述同样的意思，但是严格来说，一个html元素包含了开始标签和结束标签。 一个标准的HTML页面 <!–可以插入脚本，样式文件(css)以及各种meta信息页面标题 <!–可…

    程序猿的头像 程序猿
    2025年12月21日 • 好文分享
    000

  • 用html创建canvas画布生成图片

    本篇文章主要介绍如何用html创建canvas画布生成图片，感兴趣的朋友参考下，希望对大家有所帮助。 1，在html里新建canvas画布 /**要生成图片的html*/ 思路惊奇 思路惊奇 @@##@@ @@##@@/*生成的canvas和最终生成的图片*/ @@##@@ //设置canva画布大…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000

  • html如何布局

    本篇文章主要介绍html如何布局 ，感兴趣的朋友参考下，希望对大家有所帮助。 p布局 body{margin: 0; padding: 0;}#header{width:100%; height: 90px; background: #b19f9d; }#nav{margin: 0 auto; wi…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000

  • HTML进阶知识

    <p class="markdown_views"&gt;</p&gt;<p&gt;本篇文章主要介绍 </div&gt;<h2&gt;<code&gt;</code&gt;元素&lt…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000

  • html怎样自定义标签

    本篇文章主要介绍html怎样自定义标签，感兴趣的朋友参考下，希望对大家有所帮助。 代码如下： 自定义标签 /* 第三步： 自定义标签在设置样式的时候使用 ” 命名空间名\:标签名 ” */ mine\:tag { font-size: .36rem; font-weight: bold; color…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000

  • html标签中lang的作用

    本篇文章主要介绍html标签中lang的作用，感兴趣的朋友参考下，希望对大家有所帮助。 写在html标签中的lang属性作用：声明当前页面的语言类型。 如： //英文 //中文 //日文 //美式英文 注意：lang属性中的语言代码不区分大小写 //英文 //英文 上面的两行代码一样的效果。 另外，…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000
  • 用html中标签制作表单实例 好文分享

    用html中标签制作表单实例

    本篇文章主要介绍用如何用html标签制作表单实例，属于HTML中必须要掌握的知识点之一。感兴趣的朋友参考下，希望对大家有所帮助。表单标签：form表单标签的主要作用是：在HTML页面中创建一个表单，在用户填写完表单信息后，将数据提交给服务器。需要填写数据的标签必须要放在表单标签体里面。常用的属性： …

    程序猿的头像 程序猿
    2025年12月21日
    000

  • HTML中的超级链接标签

    无标题文档   超链接标签 a标签常用的属性： href  : 用于指定链接的资源    target: 设置打开新资源的目标。    _Blank 在独立的窗口上打开新资源   _self 在当前窗口打开新资源  file: file协议（文件协议）这种协议主要是用于搜索本地机器的资源文件的。 格…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000

  • html中的table详解

    本篇文章主要介绍html中的table，感兴趣的朋友参考下，希望对大家有所帮助。 普通表格，简单的HTML表格由table元素以及tr、td和th元素组成，其中tr是指表格行，td是指单元格，th定义表头。空单元格就直接不填即可，或者用 。 表头表头表头单元格1单元格3 2.带有边框的表格。bord…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000
  • 实现简易html视频播放器的方法 好文分享

    实现简易html视频播放器的方法

    这篇文章主要介绍了实现简易html视频播放器的方法,h5创建视频播放器很简单，您只需要添加一些h5的标签即可创建出炫酷的播放器 本文介绍了实现简易html视频播放器的方法，分享给大家，具体如下： 文件列表 root@tianshl:/data/video# lshch.mp4 test.mp4 xy…

    程序猿的头像 程序猿
    2025年12月21日
    000

  • html中的标签详解

    html标签是html语言中最基本的单位，html标签是html最重要的组成部分。网页的内容需在标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在 标签中，而网页需展示的内容需嵌套在标签中。某些时候不按标准书写代码虽然可以正常显示，但还是应该养成正规编写习惯。 1.文档结构标签:主要用来…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000

  • 如何将html转化为图片

    在我们做h5页面或者推广小程序的时候，特别是在微信里，为了让用户更好的分享给朋友，往往需要将动态生成的html生成一个图片，然后让用户长按保存发给朋友或者朋友圈。 1，在html里新建canvas画布 /**要生成图片的html*/ 思路惊奇 思路惊奇 @@##@@ @@##@@/*生成的canva…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000

  • html写网页如何布局

    html常用的布局有两种。第一种一是div布局，优点是比较方便简洁，代码比较少，制作和维护也比较容易，就是有些地方不同的浏览器兼容性不一样，可能会有不同的显示。第二种是table布局，代码比较多，到后期维护起来是非常头疼的，但是table布局规避了许多浏览器不兼容的问题。 1.div布局 body{…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000

  • 如何用html制作百度首页

    本篇文章适用与刚学html和css，练习一个比较简单的百度首页，因为百度的主页比较简单，大概分为三个部分：右上角的标签、logo和表单、下面的版权信息。对于刚开始想要检测学习成果是一个不错的好方法，熟练后再去尝试写一些复杂的html网页。 下面是html制作百度首页的源码 百度一下，你就知道搜索设置…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000
  • html中的有序列表和无序列表 好文分享

    html中的有序列表和无序列表

    本篇文章主要介绍html中的有序与无序列表示如何编写的，对于刚开始学习的小伙伴还是非常有帮助的，感兴趣的朋友参考下。 有序列表代码如下： 数字显示 第一天 第二天 第三天 第四天 字母显示 第一天 第二天 第三天 第四天 小写罗马数字显示 第一天 第二天 第三天 第四天 大写罗马数字显示 第一天 第…

    程序猿的头像 程序猿
    2025年12月21日
    000

  • html当当网首页实例

    本篇文章主要描述如何使用html来写当当网首页的案例，有对此案例感兴趣的小伙伴来参考一下吧。 html代码如下： 当当网首页 关闭 @@##@@ @@##@@ 推荐分类 外语 | 中小学教辅 | @@##@@ 图书商品分类 [小说] 悬疑 | 言情 | 职场 | 财经 [文艺] 文学 | 传记 | …

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000

  • html 空链接 href=”#”与href=”javascript:void(0)”的区别

    注意是跳动到了页首的区别，最好用void(0) 用户体验好点。 #包含了一个位置信息 默认的锚是#top 也就是网页的上端 而javascript:void(0) 仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是#但跳动到了页首 而javascript:void(0) 则不是如此 所以…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000

  • html中用href 实现点击链接弹出文件下载对话框

    这篇文章主要介绍了关于html中用href 实现点击链接弹出文件下载对话框，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下 用href 实现文件下载，之前不知道，今天有学会了一招实现点击链接弹出文件下载对话框，感兴趣的朋友可以了解下 今天又学了一招，以前不知道，就是做过的东西太少了………

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信