Create an object and display its content in a table.

Create an object and display its content in a table.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Object in Table</title>
    <style>
        table {
            width: 50%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 8px;
            text-align: left;
        }
    </style>
</head>
<body>
    <h1>Display Object in a Table</h1>
    <button onclick="displayObjectInTable()">Display Object</button>
    <div id="tableContainer"></div>

    <script>
        function displayObjectInTable() {
            // Create an object
            var person = {
                firstName: "John",
                lastName: "Doe",
                age: 30,
                occupation: "Engineer"
            };
var container = document.getElementById("tableContainer");

            // Create a table element
            var table = document.createElement("table");

            // Create a header row
            var headerRow = document.createElement("tr");
            for (var key in person) {
                var th = document.createElement("th");
                th.textContent = key.charAt(0).toUpperCase() + key.slice(1);
                headerRow.appendChild(th);
            }
            table.appendChild(headerRow);
            var headerRow = document.createElement("tr");
            for (var key in person) {
                var th = document.createElement("th");
                th.textContent = key.charAt(0).toUpperCase() + key.slice(1);
                headerRow.appendChild(th);
            }
            table.appendChild(headerRow);

            // Create a data row
            var dataRow = document.createElement("tr");
            for (var key in person) {
                var td = document.createElement("td");
                td.textContent = person[key];
                dataRow.appendChild(td);
            }
            table.appendChild(dataRow);

            // Clear the container and append the table
            container.innerHTML = "";
            container.appendChild(table);
        }
    </script>
</body>
</html>

 

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top