Tabellarische Ausgabe#

Neue Elemente hinzufügen oder entfernen, gehört zu den Möglichkeiten der DOM-Manipulation. Nach dem Motto: »Form follows function« stellen wir die Daten in einer tabellarischen Form dar.

 1<!DOCTYPE html>
 2<html lang="de-de">
 3  <head>
 4    <title>Javascript im Browser</title>
 5    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6  </head>
 7  <body>
 8    <h1>JS im HTML Version: II</h1>
 9    <ul>
10      <li>Version I: Grundgerüst</li>
11      <li>Version II: JS am Dateiende einbinden</li>
12      <li>Version III: Ausgabe einer Objektlist</li>
13      <li>Version IV: Trennung von Daten und Anwendung</li>
14      <li>Version V: Ausgabe in einer Tabelle</li>
15    </ul>
16    <pre id="debug" style="color:rgb(116, 68, 68)">
17
18    </pre>
19    <table border="1" id="teamTable">
20      <tr>
21	<th>Anrede</th> 
22	<th>Vorname</th> 
23	<th>Nachname</th>  
24      </tr>
25    </table>
26
27    <script src="./ausgabe-vars-04-data.js"></script>
28    <script src="./ausgabe-vars-05.js"></script>
29  </body>
30
31</html>

Aufgabe#

Versuchen Sie mit den Möglichkeiten Ihrer Lieblingssuchmaschine, einen Lösungsansatz zu finden, den Sie adaptieren können…

Hinweis zeigen:

Meine Suchbegriffe »javascript create table form objects« haben zu diesem Link geführt:

https://www.fwait.com/how-to-create-table-from-an-array-of-objects-in-javascript/

Lösung zeigen: 

let table = document.querySelector('#teamTable')
// console.log(table)
team.forEach((member) => {
    let row = document.createElement("tr");
    Object.values(member).forEach((text) => {
        let cell = document.createElement("td");
        let textNode = document.createTextNode(text);
        cell.appendChild(textNode);
        row.appendChild(cell);
    });
    table.appendChild(row);
});