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实现分割提取页面所需内容
May 09 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
Vue表单实例代码
Sep 05 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
js实现搜索栏效果
Nov 16 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 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数据示例代码
2013/06/08 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
几种tab切换详解
2017/02/03 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
华三通信H3C面试题
2015/05/15 面试题
光盘行动倡议书
2014/02/02 职场文书
节约用水倡议书
2014/04/16 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
工作年限证明范本
2015/06/15 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL