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客户端解决方案 缓存提供程序
Jul 14 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
浅谈vue 单文件探索
Sep 05 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中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
一端时间轮换的广告
2006/06/26 Javascript
很酷的javascript loading效果代码
2008/06/18 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
Python导入oracle数据的方法
2015/07/10 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
pycharm设置注释颜色的方法
2018/05/23 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
文明寝室申报材料
2014/05/12 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
政协委员个人总结
2015/03/03 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL