html中如何动态添加表格的实例分析

程序猿 • 2025年12月21日 16:15:16 • 好文分享 • 阅读 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);      }

First Name	Last Name
张	三

上面的代码中，首先在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 表格在增加行前和增加行后，表格宽度发生变化

增加行前

增加行后

增加行后，表格列变宽了

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

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

以上就是html中如何动态添加表格的实例分析的详细内容，更多请关注创想鸟其它相关文章！

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

html 添加表格

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

381.4K 文章

0 评论

1 粉丝

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

html中关于列表的示例代码详解（图）

上一篇 2025年12月21日 16:15:12

关于html和css以及javascript等其他的注释方式分享

下一篇 2025年12月21日 16:15:20

html中关于列表的示例代码详解（图）

html中的列表 HTML中列表中共有三种：有序列表、无序列表和定义列表。 1、有序列表是一列使用数字进行标记的项目，它使用包含于标签（ordered lists）内； <!–Code highlighting produced by Actipro CodeHighlighter (fr…

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

关于html中有序列表与无序列表的图文代码详解

编写有序列表，代码如下：数字显示第一天第二天第三天第四天字母显示第一天第二天第三天第四天小写罗马数字显示第一天第二天第三天第四天大写罗马数字显示第一天第二天第三天第四天数字显示,自己确定开始数字第一天第二天第三天第四天显示效果为：立即学习“前端免费学习笔记（深入）”；无序列表的代码如下： *…

程序猿
2025年12月21日
0000
关于html中列表样式的实例详解

HTML中的列表 HTML中列表中共有三种：有序列表、无序列表和定义列表。 1、有序列表是一列使用数字进行标记的项目，它使用包含于标签（ordered lists）内； <ol><li>开始部分</li><li>次要部分</li><…

程序猿
2025年12月21日 • 好文分享
0000
html使用四种方式引用css样式表的实例详解

方法一: css1.html 内联样式(方法一)百度一下方法二: css2.html style标签中调用(方法二)a{color:#FF0000;background:#FFFF00;}百度二下方法三: css3.html link标签中调用(方法三)百度三下和css3.html同目录下的…

程序猿
好文分享 2025年12月21日
0000
html中关于下拉列表select的图文代码详解

html中的下拉列表： Html代码 Volvo Saab Opel Audi 其中select是显示一个下拉列表(drop down list)出来，option是下拉列表中的项目(item)，而option的文本内容(text content)是下拉列表项目中显示到页面上的值，value是…

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

html中关于表单标签form的使用详解

表单就是一个放控件的地方，如文本框，密码框，按钮之类的，这些控件叫做表单元素。表单的构成：表单内容（包括按钮，输入框，选择框等等）表单元素的基本标签是标签它的type属性有以下类型： text：文本框 password：密码框 radio:单选按钮 checkbox:复选框 reset：重置…

程序猿
2025年12月21日
0000
html以及DIV+CSS的命名规范总结分享（收藏）

网页制作中规范使用div+css命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体div css命名规则css命名大全内容篇。常用DIV+CSS命名大全集合，即CSS命名规则我们开发CSS+DIV网页（Xhtml）时候,比较困惑和纠结的事就是CSS命名，特别是新手不知道什么地…

程序猿
好文分享 2025年12月21日
0000
关于html与CSS标签命名规则的总结大全

文件夹主要建立以下文件夹：　　1、images 存放一些网站常用的图片；　　2、css 存放一些css文件；　　3、flash 存放一些flash文件；　　4、psd 存放一些psd源文件；　　5、temp 存放所有临时图片和其它文件；　　6、copyright 版权信息（可选）　　8、readme…

程序猿
好文分享 2025年12月21日
0000
关于html和CSS以及JavaScript前端命名规范的详解

无意发现自己文件夹里面有这么一个文件，具体从哪里来的不记得了，仔细看下，发现总结的挺好的，贴出来分享一下。无论是从技术角度还是开发视角，对于web前端开发规范文档都有一定规范，本文就css3和html5的发展前景总结了一系列的web开发文档，仅供大家参考。规范目的：为提高团队协作效率, 便于后…

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

html中关于img标签以及改变图片尺寸的详解（图）

1、统一大小？我的网页上面有许多的图片，有的大，有的小，我想如果图片大的实现缩放，所有的都是一般大。来看看没有是什么效果。大家看的出来，非常的难看的，于是我想让有没有一种方法是把那个大的变成小的呢？ @@##@@ 效果图如下：立即学习“前端免费学习笔记（深入）”；但是如果图片太小了呢？就会被…

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

Html中关于空格的各种显示详解

一、使用全角空格全角空格被解释为汉字，所以不会被被解释为HTML分隔符，可以按照实际的空格数显示。二、使用空格的替代符号替代符号就是在需要显示空格的地方加入替代符号，这些符号会被浏览器解释为空格显示。空格的替代符号有以下几种：立即学习“前端免费学习笔记（深入）”；名称编号描述不断行的…

程序猿
2025年12月21日
0000
关于html中空格的问题解决

联系我们联系我们联系我们上边三种写法图标和文字的距离为什么都不一样？和inline-block的图标和换行有关系吗？如果我换5行联系我们联系我们上边两种效果是一样的，为什么呢？联系我们 nasp和实际打出来的空格效果是一样的为什么还要用nbsp呢？联系我们联系我们像这种1个空格1…

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

html与CSS如何实现圆形和圆角图片格式的示例代码

效果展示实现代码 < JcMan .image1{ margin-top: 100px; width:200px; height:200px; border-radius:200px; } .image2{ margin-top: 100px; width:200px; height:200…

程序猿
2025年12月21日
0000
html中如何嵌入特殊字体中文以及英文的实例

英文字体引入方法： html代码 @font-face { font-family: ‘fontNameRegular’; /* 字体名称,可自己定义 */ src: url(‘LIGHRG.eot’); src: local(‘fontName Regular’), local(‘Lightnin…

程序猿
好文分享 2025年12月21日
0000
关于html页面中怎样实现中英文切换的实例分享

如何实现html页面的双语切换呢？最粗暴的办法是做两个页面，一个中文的，一个英文的。稍微温和的方法是：在每次显示之前，对当前的语言标志进行判断，用if和else来解决，其实，这种办法虽然没有那么粗暴，但也够恶心的了。还是用其他办法吧，废话少说，直接上代码。为了简便起见…

程序猿
好文分享 2025年12月21日
0000
html中关于charset的语言编码详解

注意html的语言编码的重要性目录 charset编码重要性 charset在html什么地方 charset标签立即学习“前端免费学习笔记（深入）”；编码种类 charset utf-8介绍 charset GB2312介绍推荐网页编码因编码导致网页兼容一、编码重要性 &#8211…

程序猿
好文分享 2025年12月21日
0000
html页面中如何将编码转换成中文的示例代码

html页面中如何将编码转换成中文的示例代码 private static String convertToChinese(String dataStr) { System.out.println(“——–data str—->” + dataStr); if(dataStr =…

程序猿
好文分享 2025年12月21日
0000
如何去掉html中超链接下划线的实例

我们可以用css语法来控制超链接的形式、颜色变化。　　下面我们做一个这样的链接：未被点击时超链接文字无下划线，显示为蓝色；当鼠标在链接上时有下划线，链接文字显示为红色；当点击链接后，链接无下划线，显示为绿色。　　实现方法很简单，在源代码的和之间加上如下的CSS语法控制：　　

程序猿
好文分享 2025年12月21日
0000
html中关于form表单submit和button的提交用法详解

1.当输入用户名和密码为空的时候，需要判断。这时候就用到了校验用户名和密码，这个需要在jsp的前端页面写；有两种方法，一种是用submit提交。一种是用button提交。方法一：在jsp的前端页面的头部插入一个js方法： function checkUser(){ var result = docu…

程序猿
好文分享 2025年12月21日
0000
html中如何实现使用图像来代替提交按钮的示例

1. 用图像代替提交按钮当只有一个提交按钮的时候，可以简单的实现，不用添加事件函数，代码是：除了标签改为input type = “image”以外，其他的属性和标签的属性是一样的。 2.用图片代替所有的表单按钮代替submit按钮的图片格式是立即学习“前端免费学习…

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

发表回复

登录后才能评论

html中如何动态添加表格的实例分析

关于作者

相关推荐

发表回复