通过Javascript实现把数组里的内容以表格方式呈现到页面从

简介: 通过Javascript实现把数组里的内容以表格方式呈现到页面从

一、把数组里的内容呈现到页面从,以表格方式


<!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>
相关文章
|
8天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
8天前
|
JavaScript Java
JS有趣的灵魂 清空数组
JS有趣的灵魂 清空数组
|
10天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
14 0
|
29天前
|
JavaScript 前端开发 Java
springboot从控制器请求至页面时js失效的解决方法
springboot从控制器请求至页面时js失效的解决方法
15 0
springboot从控制器请求至页面时js失效的解决方法
|
1月前
|
JavaScript 前端开发 API
常用JavaScript 数组 API大全
常用JavaScript 数组 API大全
32 0
|
29天前
|
JavaScript 前端开发
springboot+layui从控制器请求至页面时js失效的解决方法
springboot+layui从控制器请求至页面时js失效的解决方法
15 0
|
1天前
|
JavaScript 前端开发 索引
JavaScript 数组中的增、删、改、查
JavaScript 数组中的增、删、改、查
|
11天前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
15天前
|
JavaScript 前端开发
JavaScript数组的功能内置类型
数组是JavaScript的内置类型,JavaScript数组的功能特别强大。下面简单介绍一下JavaScript数组。
|
16天前
|
存储 JavaScript 前端开发
在浏览器中存储数组和对象(js的问题)
在浏览器中存储数组和对象(js的问题)