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方法
Jun 24 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 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
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
PHP测试程序运行时间的类
2012/02/05 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
javascript+mapbar实现地图定位
2010/04/09 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
Python正则表达式使用经典实例
2016/06/21 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
详解python中的数据类型和控制流
2019/08/08 Python
Python如何操作docker redis过程解析
2020/08/10 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
python代码实现图书管理系统
2020/11/30 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
安全生产大检查方案
2014/05/07 职场文书
房屋产权证明书
2014/10/15 职场文书
个人债务授权委托书
2014/10/17 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
JavaScript数组 几个常用方法总结
2021/11/11 Javascript