JavaScript如何实现动态生成表格
这篇文章给大家分享的是有关JavaScript如何实现动态生成表格的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
前言
在这里实现一个动态添加表格的案例,当点击添加按钮时,可以弹出一个表单,然后将输入的内容添加到表格中,也可以将表格中的整行内容清除。
实现思路
先创建一个表格和一个表单,将表单中输入的内容动态添加进表格中,表单页面右上角有一个关闭按钮,当点击时,可以将表单页面关闭并将表格页面显示。为了页面美观,我将添加数据的按钮放在了表格的
中,将动态生成的表格数据添加到
中,当点击添加按钮时,隐藏表格,并显示表单,在表单中填写要添加的信息,然后获取输入的信息,通过jquery生成表格的一行元素,并将获得的值添加进去,最后将这一行添加到的最后一行,当点击表单页面的添加按钮时,让表单隐藏,并显示修改后的变革,因为还要实现动态删除功能,所以需要给表格中的每一行元素添加一个删除属性(超链接),当我们点击删除时,获取到其对应的行,进行删除操作。实现代码
班级 | 姓名 | 学号 | 操作 |
---|
1班 | 小王 | 001 | 删除 |
2班 | 小熊 | 002 | 删除 |
添加数据
添加数据×班级:姓名:学号: