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 相关文章推荐
iframe 异步加载技术及性能分析
Jul 19 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
js中url对象化管理分析
Dec 29 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
拼音码表的生成
2006/10/09 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
JavaScript Archive Network 集合
2007/05/12 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
vue axios post发送复杂对象问题
2019/06/04 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
python3使用urllib模块制作网络爬虫
2016/04/08 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
新闻网站实习自我鉴定
2013/09/25 职场文书
物流专业大学应届生求职信
2013/11/03 职场文书
服装设计专业自荐书范文
2013/12/30 职场文书
营销总经理岗位职责
2014/02/02 职场文书
会计员岗位职责
2014/03/15 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript