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下查找父节点的简单方法
Aug 13 Javascript
不安全的常用的js写法
Sep 15 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
javascript实现捕捉键盘上按下的键
May 05 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
vue.js实现左边导航切换右边内容
Oct 21 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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
PHP中读写文件实现代码
2011/10/20 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
浅析vue-router原理
2018/10/19 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
Python类的用法实例浅析
2015/05/27 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
拓展培训心得体会
2014/01/04 职场文书
党员剖析材料范文
2014/09/30 职场文书
环卫工人慰问信
2015/02/15 职场文书
团员个人总结
2015/02/26 职场文书
会议简报格式范文
2015/07/20 职场文书