当前位置:网站首页>动态生成表格
动态生成表格
2022-07-06 22:37:00 【抱抱旋旋子】
创建学生数据
因为里面的学生数据都是动态的,我们需要s动态生成。这里我们模拟数据,自己定义好数据。
因为里面的数据有好多好多个,所以我们采取数组的形式来存储,每个数组里面的元素是一个对象
创建行
因为里面的学生数据都是动态的,我们需要js动态生成。这里我们模拟数据,自己定义好数据。数据我们采取对象形式存储。
所有的数据都是放到tbody里面的行里面。
因为行很多,我们需要循环创建多个行(对应多少人)
创建单元格
每个行里面又有很多单元格(对应里面的数据),我们还继续使用循环创建多个单元格,并且把数据存入里面(双重for循环)
单元格填充数据
注意:
for(var k in obj) {
k 得到的是属性名
obj[k] 得到是属性值
}
创建删除单元格
最后一列单元格是删除,需要单独创建单元格。
添加删除操作
注意:删除是在所有的行和单元格都创建完后再去删除,所以得放到for循环下面
下面是动态生成表格的所有代码
边栏推荐
- 组织实战攻防演练的5个阶段
- Why do many people misunderstand technical debt
- The worse the AI performance, the higher the bonus? Doctor of New York University offered a reward for the task of making the big model perform poorly
- namespace基础介绍
- 【736. Lisp 语法解析】
- Some understandings about 01 backpacker
- Markdown editor
- STM32F103 realize IAP online upgrade application
- 广告归因:买量如何做价值衡量?
- offer如何选择该考虑哪些因素
猜你喜欢
Kivy tutorial of setting the size and background of the form (tutorial includes source code)
If you‘re running pod install manually, make sure flutter pub get is executed first.
3GPP信道模型路损基础知识
C语言中函数指针与指针函数
Operand of null-aware operation ‘!‘ has type ‘SchedulerBinding‘ which excludes null.
Section 1: (3) logic chip process substrate selection
01 machine learning related regulations
Chapter 9 Yunji datacanvas company has been ranked top 3 in China's machine learning platform market
Liste des hôtes d'inventaire dans ansible (je vous souhaite des fleurs et de la romance sans fin)
Pointer and array are input in function to realize reverse order output
随机推荐
【数模】Matlab allcycles()函数的源代码(2021a之前版本没有)
[practice leads to truth] is the introduction of import and require really the same as what is said on the Internet
程序员上班摸鱼,这么玩才高端!
National meteorological data / rainfall distribution data / solar radiation data /npp net primary productivity data / vegetation coverage data
How to package the parsed Excel data into objects and write this object set into the database?
01机器学习相关规定
If you‘re running pod install manually, make sure flutter pub get is executed first.
什么是Web3
Jetson nano配置pytorch深度学习环境//待完善
File upload vulnerability summary
STM32封装ESP8266一键配置函数:实现实现AP模式和STA模式切换、服务器与客户端创建
Advertising attribution: how to measure the value of buying volume?
Flex layout and usage
抖音或将推出独立种草社区平台:会不会成为第二个小红书
深入解析Kubebuilder
Web3 社区中使用的术语
【Android Kotlin协程】利用CoroutineContext实现网络请求失败后重试逻辑
Organize five stages of actual attack and defense drill
STM32F103实现IAP在线升级应用程序
JS variable case