Dynamic Table JavaScript

How to Create a Dynamic Table with Vanilla JavaScript

Watch the full tutorial here:
Youtube Rumble Odysee

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./main.js" defer></script>
    <title>Document</title>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>

</body>

</html>

javascript

const arr = [
    {
        "Fname": "Ana",
        "Lname": "Rodríguez",
    },
    {
        "Fname": "Emily",
        "Lname": "Johnson",
    },
    {
        "Fname": "Marcos",
        "Lname": "López",
    },
    {
        "Fname": "David",
        "Lname": "Fernández",
    },
    {
        "Fname": "Michael",
        "Lname": "Williams",
    }
];

let count = 1;

const tbody = document.getElementById('tbody');
for (let i = 0; i < arr.length; i++) {
    const element = `
        <tr>
            <td>${String(count++).padStart(2, "0")}</td>
            <td>${arr[i].Fname}</td>
            <td>${arr[i].Lname}</td>
            <td>${arr[i].age}</td>
        </tr>
    `;
    tbody.innerHTML += element;
}