通过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>
相关文章
|
21天前
|
JavaScript
js 解析 byte数组 成字符串
js 解析 byte数组 成字符串
|
9天前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
15 2
前端JS读取文件内容并展示到页面上
|
9天前
|
JavaScript 前端开发
js 回到页面顶部
本文提供了一个JavaScript函数`scrollToTop`,用于平滑滚动页面回到顶部。该函数利用`requestAnimationFrame`和`window.scrollTo`方法逐步减少滚动条距离,直到页面完全回到顶部。
20 1
|
15天前
|
JavaScript 前端开发
js删除数组最后一个元素
js删除数组最后一个元素
|
14天前
|
JavaScript 前端开发 索引
|
20天前
|
JavaScript
js 循环数组取值
js 循环数组取值
|
4天前
|
JavaScript 前端开发 C++
JavaScript用indexOf()在字符串数组中查找子串时需要注意的一个地方
JavaScript用indexOf()在字符串数组中查找子串时需要注意的一个地方
|
4天前
|
JavaScript 前端开发
JavaScript从二维数组抽取元素组成新数组的三种方法
JavaScript从二维数组抽取元素组成新数组的三种方法
|
6天前
|
JavaScript 前端开发
[收藏]用JavaScript让弹出页面以最小化的形式出现在状态栏中
[收藏]用JavaScript让弹出页面以最小化的形式出现在状态栏中
|
6天前
|
JavaScript 前端开发
JavaScript 中 五种迭代数组的方法 every some map filter forEach
本文介绍了JavaScript中五种常用数组迭代方法:every、some、filter、map和forEach,并通过示例代码展示了它们的基本用法和区别。