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 相关文章推荐
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
介绍一些PHP判断变量的函数
2012/04/24 PHP
php 强制下载文件实现代码
2013/10/28 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
python中的装饰器详解
2015/04/13 Python
python一键升级所有pip package的方法
2017/01/16 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
Python简单实现区域生长方式
2020/01/16 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
心理学专业毕业生推荐信范文
2013/11/21 职场文书
卫校护理专业毕业生求职信
2013/11/26 职场文书
党员批评与自我批评
2014/02/12 职场文书
英语国培研修感言
2014/02/13 职场文书
国际贸易求职信
2014/07/05 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
依法行政工作汇报
2014/10/28 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
未婚证明格式
2015/06/15 职场文书