前端小白需要掌握的实例操作——动态生成表格

为了更加方便的渲染数据删除数据，不再像原来只能把表格写死，所以我们就需要接触到这个新的方法——动态生成表格

案例分析

1.因为学生数据是动态的，所以我们需要js动态生成。接下来模拟数据，采用对象形式储存

2.所有的数据都放在tbody里面

3.创建的行是根据数据对象的多少

开始实践！

第一步 确定HTML格式

（因为css很简单所以就不显示在操作里了，有兴趣的同学可以在我文章的后面找到他们！）

首先我们知道，做一个表格三个结构table、thead、tbody。因为我们要实现动态结构是tbody的动态变化，所以我们把thead标签的内容固定，然后数据与之一一对应

第二步 准备数据

因为数据在这里是例子，所以我们自己举例打出来几个data，但是我们在平时的开发之中，需要与后端同学对接从而获取数据库里面的对应内容，切记要和后端沟通好数据的格式，这里我们前端需要的数据格式是对象

这里我们写出来了数据格式，但是为什么是这样的？这里可以参考对象

var data = [1,2,3,4,5]

然后每一个内容就对应着12345 切记要用逗号隔开

第三步 为tbody创建行

为tbody创建行 通过数组长度创建行数

这里我们思想就是选中tbody，然后根据datas数据的长度来增加对应的行数

//创建tr元素
var tr = document.createElement('tr');
//为tr元素声明位置
 tbody.appendChild(tr);

然后我们利用浏览器就可以看到我们的行已经成功创建啦！

第四步 为行创建单元格

单元格的思想与行类似，但是是通过对象属性的数量来创建对应个数

（这里有个小小的技巧补充一下，忘记了可以跳转到文章后面的补充）

与第三步类似，就直接放出效果图

我们可以发现成功了，由此我们创建出来了我们需要的动态数据表格

第五步 为单元格填充数据

根据上面的for方法我们可以利用obj[k]获取对应的数据值，然后利用创建完的td 直接将数据渲染到对应的表格中

接下来让我们看看效果！

大致是完成了，但是如果我们还想为表格对应行赋予操作，就需要另想他法

第六步 为对应行添加删除操作

接下来我们要对js代码进行分析，首先我们根据数据的个数创建对应的行数，在创建每一行的同时根据数据里的属性数创建对应数量的单元格，随后我们如果想要在每一行后添加删除格的话，只需要在创建完单元格后添加即可

下面是效果图

第七步 添加删除操作

在循环外添加删除操作 添加点击事件删除所在行，接下来就实现了点击删除的效果啦！

下面是效果图！

补充

for(var k in obj){
    k //得到的是属性名
    obj[k] //得到的是属性值
}

如果源代码的同学请到我的gitee获取：

gitee.com/wangbgit/co…

我的目标是专注分享我在日常学习中学到的知识，不仅可以为大家提供方便而且可以加深印象，我们大家要一直进步，一直在路上呀~

希望大家多多提出问题，提供建议，我会认真解答和改进的！