JavaScript创建表格的方法

更新时间：2020年04月13日 08:39:00 作者：TomHe789

这篇文章主要为大家详细介绍了JavaScript创建表格的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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中介者模式？js中介者模式的作用是什么，感兴趣的小伙伴们可以参考一下
2016-08-08
在线一元二次方程计算器实例(方程计算器在线计算)
在线一元二次方程式计算器实例分享，大家参考使用吧
2013-12-12
webpack模块化的原理解析
webpack 中实现模块化的核心就是 __webpack_require__ 函数，无论是commonjs模块化还是es 模块都是通过该函数来导入的，这篇文章主要介绍了webpack模块化的原理,需要的朋友可以参考下
2023-02-02
Javascript代码混淆综合解决方案-Javascript在线混淆器
Javascript代码混淆综合解决方案-Javascript在线混淆器...
2006-12-12
javascript中的nextSibling使用陷(da)阱(keng)
关于HTML/XML节点的问题，在IE中nextSibling不会返回文本节点，而chrome或者firefox等会返回文本节点
2014-05-05
复制小说文本时出现的随机乱码的去除方法
想把小说复制下来慢慢看，却发现复制到记事本里出现一大堆乱七八糟的东西，很是不爽。于是就想了个简单的办法把它干掉了。
2010-09-09
js 通用订单代码
对于订单，想必大家并不陌生吧，下为大家介绍下使用js实现的订单，感兴趣的朋友可以参考下
2013-12-12
基于JavaScript如何制作遮罩层对话框
遮罩层听起来貌似很复杂，其实说白了就是一个全界面的半透明的div，用户不可以点击下边的元素，或者说是点击没有反应，接下来通过本文给大家介绍JavaScript如何制作遮罩层对话框，对js遮罩层相关知识感兴趣的朋友一起学习吧
2016-01-01
js实现单击可修改表格
这篇文章主要为大家详细介绍了js实现单击可修改表格，类似成绩单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
JavaScript 正则命名分组【推荐】
以往我们只是习惯于通过数组下标来访问正则匹配到的分组，但分组达到4、5个时，标识起来就会非常麻烦。V8早已实现了正则命名分组提案，只是我们很少使用，本文将介绍JS的正则命名分组
2018-06-06