一、把数组里的内容呈现到页面从,以表格方式
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <style>
- .tb,th,td{
- border: 1px solid #CC5D5E;
- }
- </style>
- </head>
- <body>
- <table class="tb">
- <th>ID</th>
- <th>姓名</th>
- <th>年龄</th>
- </table>
- <script>
- var Data=[
- {id:1, name:"小米", age:18},
- {id:2, name:"小明", age:10},
- {id:3, name:"小菜", age:20}
- ]
- var tbody=document.querySelector("tbody")
- Data.forEach(function(i){
- //i代表数组中的每一个对象
- //创建一个tr
- var tr=document.createElement("tr")
- //循环遍历i对象
- for(var key in i){
- //创建td标签
- var td=document.createElement("td")
- //向td标签里插入(修改)内容
- var cc=td.innerText=i[key]
- //向tr标签里插入td标签(有内容)
- tr.appendChild(td)
- }
- //向tbody元素里插入tr标签
- tbody.appendChild(tr)
- })
- </script>
- </body>
- </html>
文章知识点与官方知识档案匹配,可进一步学习相关知识