practical-javascript/DOM_basic/build_a_table_completejavascript.com.js at master · completejavascript/practical-javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<style>
 /* Defines a cleaner look for tables */
 table {border-collapse: collapse;}
 td, th {border: 1pxsolidblack;padding: 3px8px;}
 th {text-align: left;}
</style>

<script>
functionbuildTable(data){
vartable=document.createElement("table");

vartr1=document.createElement("tr");
Object.keys(data[0]).forEach(function(key){
varth=document.createElement("th");
vartxt=document.createTextNode(key);
th.appendChild(txt);
tr1.appendChild(th);
});
table.appendChild(tr1);

data.forEach(function(rowData){
vartri=document.createElement("tr");
for(varkeyinrowData){
vartd=document.createElement("td");
vartxt=document.createTextNode(rowData[key]);
if(key=="height")td.style.textAlign="right";
td.appendChild(txt);
tri.appendChild(td);
}
table.appendChild(tri);
});

returntable;
}

varMOUNTAINS=[
{name: "Kilimanjaro",height: 5895,country: "Tanzania"},
{name: "Everest",height: 8848,country: "Nepal"},
{name: "Mount Fuji",height: 3776,country: "Japan"},
{name: "Mont Blanc",height: 4808,country: "Italy/France"},
{name: "Vaalserberg",height: 323,country: "Netherlands"},
{name: "Denali",height: 6168,country: "United States"},
{name: "Popocatepetl",height: 5465,country: "Mexico"}
];

document.body.appendChild(buildTable(MOUNTAINS));
</script>