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 相关文章推荐
日期 时间js控件
May 07 Javascript
JavaScript 继承详解(四)
Jul 13 Javascript
jquery select操作的日期联动实现代码
Dec 06 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
js实现自动播放匀速轮播图
Feb 06 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 无限级数据JSON格式及JS解析
2010/07/17 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
php-app开发接口加密详解
2018/04/18 PHP
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
详细分析python3的reduce函数
2017/12/05 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
研发工程师的岗位职责
2013/11/18 职场文书
应届生求职自荐信范文
2014/04/07 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
上下班时间调整通知
2015/04/23 职场文书