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的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
Vue组件的使用教程详解
Jan 05 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 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
php接口与接口引用的深入解析
2013/08/09 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
利用javascript查看html源文件
2006/11/08 Javascript
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
django基于restframework的CBV封装详解
2019/08/08 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
建筑工地文明标语
2014/10/09 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
面试复试通知单
2015/04/24 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server