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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. python 基于PYMYSQL使用MYSQL数据库2. set rs=conn.execute,set rs=server.createobject(“ADODB.recordset”)的性能对比3. python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析4. SpringBoot中使用Jsoup爬取网站数据的方法5. 如何使用Mock修改Android设备上的features6. opencv-python的RGB与BGR互转方式7. Python ini文件常用操作方法解析8. 详解Android跨进程通信之AIDL9. 在Spring 中使用@Aspect 控制自定义注解的操作10. Android制作登录页面并且记住账号密码功能的实现代码
网公网安备