通过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>
相关文章
|
20天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
34 2
|
2月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
28 3
|
2月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
39 4
|
2月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
43 1
|
2月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
27 5
|
2月前
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(一)
JavaScript动态渲染页面爬取——Selenium的使用(一)
58 4
|
2月前
|
Web App开发 数据采集 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(二)
JavaScript动态渲染页面爬取——Selenium的使用(二)
66 2
|
2月前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
22 0
|
2月前
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
28 0