JavaScript动态创建table表格

最新推荐文章于 2024-08-19 18:58:28 发布

Eason_Lou

最新推荐文章于 2024-08-19 18:58:28 发布

阅读量2k

点赞数 1

分类专栏：前端文章标签： html javascript

本文链接：https://blog.csdn.net/weixin_54366356/article/details/117705592

版权

前端专栏收录该内容

28 篇文章 3 订阅

订阅专栏

平时我们在用js去动态生成table表格的时候，都是一遍遍的去循环遍历数组中的字段，而在前端页面中表格多的时候就要写好多这样的代码，比较繁琐…

使用如下方法，直接调用即可生成table

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>JavaScript动态创建table表格</title>
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
		<div class="col-lg-12">
			<table class="table table-bordered">
				<thead bgcolor="#55aaff">
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>年龄</th>
					</tr>
				</thead>
				<tbody id="tb_tbody">

				</tbody>
			</table>
			<table class="table table-bordered">
				<thead bgcolor="#55aaff">
					<tr>
						<th>序号</th>
						<th>年龄</th>
						<th>姓名</th>
					</tr>
				</thead>
				<tbody id="tb_tbody2">

				</tbody>
			</table>
		</div>

		<script type="text/javascript">
			//生成数据
			let tableData = new Array();
			for (let i = 0; i < 10; i++) {
				let age = (Math.random() * 30).toFixed(0);
				tableData.push({
					index: (i + 1),
					name: '小明',
					age: age
				});
			};
			let keyData = ['index', 'name', 'age'];
			let keyData2 = ['index', 'age', 'name'];

			//调用函数
			createTable(tableData, keyData, 'tb_tbody');
			createTable(tableData, keyData2, 'tb_tbody2');


			//动态创建table表格函数
			function createTable(tableList, keyList, tbodyId) {
				let str = '';
				for (let i = 0; i < tableList.length; i++) {
					str += "<tr>";
					for (let j = 0; j < keyList.length; j++) {
						str += "<td>" + tableList[i][keyList[j]] + "</td>";
					};
				};
				document.querySelector(`#${tbodyId}`).innerHTML = str;
			};
			//createTable(tableList, keyList, tbodyId)函数接收三个参数，分别如下：
			//tableList：表格的json数据[{},{},{}]形式
			//keyList:表格数组里面每一个对象所包含的字段数组，即表格中每一列所展示的数据对应的字段
			//tbodyId:table表格中tbody的ID,注意，是tbody的ID，不是class
		</script>
	</body>
</html>