-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathTabla
More file actions
56 lines (50 loc) · 1.77 KB
/
Tabla
File metadata and controls
56 lines (50 loc) · 1.77 KB
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
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabla de personas</title>
</head>
<body>
<div id="table-container"></div>
<script src="main.js"></script>
</body>
</html>
//---
let personArr = [
{"personId": 123, "name": "Jhon", "city": "Melbourne", "phoneNo": "1234567890" },
{"personId": 124, "name": "Amelia", "city": "Sydney", "phoneNo": "1234567890" },
{"personId": 125, "name": "Emily", "city": "Perth", "phoneNo": "1234567890" },
{"personId": 126, "name": "Abraham", "city": "Perth", "phoneNo": "1234567890" },
];
function generarTabla(arr) {
let table = document.createElement("table");
table.border = "1";
let thead = document.createElement("thead");
let headerRow = document.createElement("tr");
let headers = ["Person ID", "Name", "City", "Phone No"];
headers.forEach((headertext) => {
let th = document.createElement("th");
th.appendChild(document.createTextNode(headertext));
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
arr.forEach((person) => {
let row = document.createElement("tr");
Object.values(person).forEach((cellData) => {
let td = document.createElement("td");
td.appendChild(document.createTextNode(cellData));
row.appendChild(td);
});
tbody.appendChild(row);
});
table.appendChild(tbody);
return table;
}
document.addEventListener("DOMContentLoaded", () => {
let tableContainer = document.getElementById("table-container");
let table = generarTabla(personArr);
tableContainer.appendChild(table);
});