js_模拟动态生成表格

这篇博客介绍了如何使用JavaScript动态生成表格,包括确定表格行数、向tbody添加元素节点、便利数组创建tr和td,以及添加删除操作。内容以对象形式存储在数组中,通过便利数组来生成对应数量的tr和td,每个td填充对象内容。最后,为表格添加了删除功能,通过便利a标签并注册事件来实现删除指定行。
摘要由CSDN通过智能技术生成

1.首先表格内容是不确定的,标题th不变, 所以我们给个宽度就行,
2.标题th不变,所以只管td,

第一步: 既然内容不确定,所以我们不要在HTML结构上写td,只写一个tbody,为什么? 我们可以往里面创建添加 tr、td 元素节点,

第二步: 我们首先要确定行数,怎么实现?
我们可以这样,把内容以对象的形式存放到数组里,而数组的"长度"就是我们的所求表格的“行数”,跟数组一样,每个对象之间用逗号隔开

第三步: 就是往里面添加元素节点,往谁添加?
当然是往tbody添加,所以要把tbody获取过来

第四步: 确定行数,既然行数是有存放对象的数组决定的,所以我们要便利数组,

第五步: 往 tbody 里面创建添加 tr 节点,
注意! 是往后面添加 .append

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值