JavaScript创建表格的方法


Posted in Javascript onApril 13, 2020

本文实例为大家分享了JavaScript创建表格的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>

</head>
<body>
<div id = "mountains"></div>

<script>
 let MOUNTAINS = [
  {name: "Kilimanjaro", height: 5895, place: "Tanzania"},
  {name: "Everest", height: 8848, place: "Nepal"},
  {name: "Mount Fuji", height: 3776, place: "Japan"},
  {name: "Vaalserberg", height: 323, place: "Netherlands"},
  {name: "Denali", height: 6168, place: "United States"},
  {name: "Popocatepetl", height: 5465, place: "Mexico"},
  {name: "Mont Blanc", height: 4808, place: "Italy/France"}
 ];

 // 创建表格
 function buildTable(data) {
  let table = document.createElement("table");
  let tr = document.createElement("tr");
  // 通过 for in 循环遍历对象,得到对象的属性,为表头添加内容
  for (let i in data[6]) {
   let th = document.createElement("th");
   th.innerText = i;
   tr.appendChild(th);
  }
  table.appendChild(tr);
  // 通过 forEach 循环遍历对象数组,为表格添加行
  data.forEach((value, index) => {
   let tr = document.createElement("tr");
   // 通过 for in 循环遍历对象,得到对象的属性,给每行添加内容
   for (let index1 in data[index]) {
    let td = document.createElement("td");
    td.innerText = data[index][index1];
    tr.appendChild(td);
   }
   table.appendChild(tr);
  });
  //设置表格的对齐属性,和边框属性
  table.setAttribute("text-align", "right");
  table.setAttribute("border","1");

  return table;
 }

 document.querySelector("div").appendChild(buildTable(MOUNTAINS));
</script>
</body>
</html>

JavaScript创建表格的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
JavaScript 函数的执行过程
May 09 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
javascript单张多张图无缝滚动实例代码
May 10 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 #Javascript
jquery实现轮播图特效
Apr 12 #jQuery
用jQuery实现抽奖程序
Apr 12 #jQuery
javascript实现画板功能
Apr 12 #Javascript
JS实现随机点名器
Apr 12 #Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 #Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 #Javascript
You might like
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
做网页的一些技巧
2007/02/01 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
python通过post提交数据的方法
2015/05/06 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
python使用turtle库绘制时钟
2020/03/25 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
python实现微信自动回复机器人功能
2019/07/11 Python
详解python statistics模块及函数用法
2019/10/27 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
Python logging模块原理解析及应用
2020/08/13 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
现金会计岗位职责
2013/12/05 职场文书
入党自我评价优缺点
2014/01/25 职场文书
红头文件任命书范本
2014/06/05 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
出差报告怎么写
2014/11/06 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis
MongoDB支持的索引类型
2022/04/11 MongoDB