js动态拼接数据表格Table

最新推荐文章于 2023-04-23 15:25:48 发布

Eason_Lou

最新推荐文章于 2023-04-23 15:25:48 发布

阅读量2k

点赞数

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

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

版权

前端专栏收录该内容

28 篇文章 3 订阅

订阅专栏

<!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></title>
		<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" />
		<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.all.js"></script>
	</head>
	<body>
		<div class="layui layui-col-md12">
			<table class="layui layui-table">
				<thead>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>性别</th>
						<th>年龄</th>
					</tr>
				</thead>
				<tbody class="tbody">

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

	</body>
</html>

<script>
	var html = ""
	for (var i = 0; i < 10; i++) {
		html += "<tr>" + "<td>" + (i + 1) + "</td>" + "<td>" + '小明' + "</td>" + "<td>" + '男' + "</td>" + "<td>" + 23 +
			"</td>" + "</tr>"
	}
	document.querySelector(".tbody").innerHTML = html;
</script>

效果图

Eason_Lou

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js动态拼接数据表格Table

js动态拼接数据表格table </tbody> </table> </div> <script> var html = "" for (var i = 0; i < 10; i++) { html += "<tr>" + "<td>" + (i + 1) + "</td>" + "<td>" + '小明' + "&
复制链接

扫一扫

专栏目录