通过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>
相关文章
|
19天前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
16 2
|
23天前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
19 3
|
24天前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
33 4
|
23天前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
27 1
|
26天前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
22 5
|
28天前
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(一)
JavaScript动态渲染页面爬取——Selenium的使用(一)
|
28天前
|
Web App开发 数据采集 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(二)
JavaScript动态渲染页面爬取——Selenium的使用(二)
|
29天前
|
JavaScript 前端开发 索引
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
28 1
|
23天前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
13 0
|
23天前
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
15 0