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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在uni-app中,监听页面滚动可以使用onPageScroll生命周期函数或@scroll事件监听器,onPageScroll适用于监听整个页面的滚动事件,而@scroll事件监听器适用于监听特定组件如scroll-view的滚动,这两种方法的选择取决于监听需求的不同,需要的朋友可以参考下2024-09-09
似乎某些程序员的集合是不相交的，就好像JS程序员和玩编译原理和CPU指令的汇编程序员就几乎没有交叉。前些日子讨论的火热的“作用域链”问题，说白了就是寻址问题，不过，这个在C中十分简单的问题却被JS这个动态语言弄得很复杂。2009-04-04
这篇文章主要汇总了JavaScript常用的工具函数，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-09-09
这篇文章主要为大家详细介绍了Bootstrap警告（Alerts）的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了JS实现探测网站链接的方法,通过网站返回错误响应触发onerror时间来判断网站链接的可用性，非常简便实用,需要的朋友可以参考下2016-11-11
这篇文章主要为大家详细介绍了js移动端事件基础及常用事件库，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了JavaScript中如何调用Java方法，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-09-09
JavaScript 中的reduce()方法可以用于将数组元素汇总为单个值，，所以本文为大家整理了一些JavaScript数组中reduce方法的应用，需要的可以参考一下2023-07-07
javascript setTimeout()传递函数参数(包括传递对象参数)
由于需要，我要用到setTimeout（）并且在里边的函数参数传递一个参数，就像这样setTimeout（"fun(参数)", 1000）。但是以我这种写法，js会报错，说‘参数’未定义。2010-04-04
JavaScript中的变量声明早于赋值分析，需要的朋友可以参考下2012-03-03
最新评论