<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="body">
</tbody>
</table>
<script type="text/javascript">
//一般是通过网络请求,写入到页面
var dataList=[
{id:1,name:"ydy",age:20},
{id:2,name:"ydy",age:20},
{id:3,name:"ydy",age:20},
{id:4,name:"ydy",age:20},
]
for(var idx in dataList){
var info=dataList[idx]
var tr=document.createElement('tr');
for(var key in info){
//先创建标签,后赋值,后加入父标签
var text=info[key];
var td=document.createElement('td');
td.innerText=text;
tr.appendChild(td);
}
var bodyTag=document.getElementById("body")
bodyTag.appendChild(tr)
}
</script>
</body>
</html>
javaScript案例 动态表格
最新推荐文章于 2024-10-08 12:21:22 发布