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 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
如何删除多级目录
2006/10/09 PHP
Banner程序
2006/10/09 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
快速入门python学习笔记
2017/12/06 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
python多线程抽象编程模型详解
2019/03/20 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
《雨霖铃》教学反思
2014/02/22 职场文书
10的分与合教学反思
2014/04/30 职场文书
旅游节目策划方案
2014/05/26 职场文书
节能标语大全
2014/06/21 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS