ppwjs之bootstrap表格：基础表格

最新推荐文章于 2025-08-09 20:51:19 发布

转载最新推荐文章于 2025-08-09 20:51:19 发布 · 86 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3979725/blog/2218838

文章标签：

#javascript #python #ViewUI

本文详细介绍了使用Bootstrap4框架创建基础表格的过程，包括表头、表身的设置，以及如何添加数据行。通过循环实现表格数据的填充，适用于网页前端开发人员学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPT html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>ppwjs欢迎您</title>
		<link rel="icon" href="/favicon.ico" type="image/x-icon" />
	</head>
	<body>
	</body>
	<script src="/jsVersionControl.js" charset="utf-8" type="text/javascript"></script>
	<script src="/lib/_sys_ppwjsmain.js" charset="utf-8" type="text/javascript"></script>
	<script charset="utf-8" type="text/javascript">引入("/index.js",$真)</script>
</html>

//程序开始
引入(_sys_bootstrap4_all_addr + ".js",$真);

var 标题1 = "bootstrap4 基础表格".到标题元素();
变量 表格 = bootstrap4.表格.创建表格元素();

//表头的设置
变量 表头 = bootstrap4.表格.创建表头元素();
变量 表头行 = bootstrap4.表格.创建表行元素();
变量 表头单元格1 = bootstrap4.表格.创建表头单元格元素();
表头单元格1.置内部代码("姓名");
变量 表头单元格2 = bootstrap4.表格.创建表头单元格元素();
表头单元格2.置内部代码("性别");
变量 表头单元格3 = bootstrap4.表格.创建表头单元格元素();
表头单元格3.置内部代码("年龄");
表头行.添加子节点(表头单元格1,表头单元格2,表头单元格3);
表头.添加子节点(表头行);
表格.添加子节点(表头);

//表身的设置
变量 表身 = bootstrap4.表格.创建表身元素();

循环(变量 i=0;i<10;i++){
	变量 表行 = bootstrap4.表格.创建表行元素();
	变量 单元格1 = bootstrap4.表格.创建单元格元素();
	变量 单元格2 = bootstrap4.表格.创建单元格元素();
	变量 单元格3 = bootstrap4.表格.创建单元格元素();
	单元格1.置内部代码("张三" + i);
	单元格2.置内部代码("男");
	单元格3.置内部代码(i.toString());
	表行.添加子节点(单元格1,单元格2,单元格3);
	表身.添加子节点(表行);
}
表格.添加子节点(表身);


变量 容器 = bootstrap4.创建容器();
容器.添加子节点(标题1,表格);

加到主体(容器);