๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Web/JavaScript

Dynamically Create table with rows in JavaScript

Sorrel_ 2019. 8. 7. 14:27
๋ฐ˜์‘ํ˜•

<!DOCTYPE html>
<html>
<head>
    <title>Convert JSON Data to HTML Table</title>
    <style>
        th, td, p, input {
            font:14px Verdana;
        }
        table, th, td 
        {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
        th {
            font-weight:bold;
        }
    </style>
</head>
<body>
    <input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
    <p id="showData"></p>
</body>

<script>
    function CreateTableFromJSON() {
        var myBooks = [
            {
                "Book ID": "1",
                "Book Name": "Computer Architecture",
                "Category": "Computers",
                "Price": "125.60"
            },
            {
                "Book ID": "2",
                "Book Name": "Asp.Net 4 Blue Book",
                "Category": "Programming",
                "Price": "56.00"
            },
            {
                "Book ID": "3",
                "Book Name": "Popular Science",
                "Category": "Science",
                "Price": "210.40"
            }
        ]

        // EXTRACT VALUE FOR HTML HEADER. 
        // ('Book ID', 'Book Name', 'Category' and 'Price')
        var col = [];
        for (var i = 0; i < myBooks.length; i++) {
            for (var key in myBooks[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        // CREATE DYNAMIC TABLE.
        var table = document.createElement("table");

        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

        var tr = table.insertRow(-1);                   // TABLE ROW.

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");      // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        // ADD JSON DATA TO THE TABLE AS ROWS.
        for (var i = 0; i < myBooks.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = myBooks[i][col[j]];
            }
        }

        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    }
</script>
</html>
for (var i = 0; i < myBooks.length; i++) {
    for (var key in myBooks[i]) {
        col.push(key);
        console.log (key);
    }
}

var table = document.createElement("table");
var tr = table.insertRow(-1);       // TABLE ROW.

for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th");      // TABLE HEADER.
    th.innerHTML = col[i];
    tr.appendChild(th);
}

 

https://www.encodedna.com/javascript/populate-json-data-to-html-table-using-javascript.htm

 

Convert JSON Data Dynamically to HTML Table using JavaScript - Dynamically Create table with rows in JavaScript

Want to keep up to date with all my lastest articles and tip? Click Here to Subscribe JSON or JavaScript Object Notation, as you know is a simple easy to understand data format. JSON is lightweight and language independent and that is why its commonly used

www.encodedna.com

 

๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€

'Web > JavaScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

์›น์—์„œ OAuth 2.0 ์‚ฌ์šฉํ•˜๊ธฐ (Google)  (0) 2020.09.21
[Javascript] MathJax - ์ˆ˜ํ•™ ๊ธฐํ˜ธ ์“ฐ๊ธฐ  (0) 2020.08.12
์†Œ์ˆซ์  ๋ฐ˜์˜ฌ๋ฆผ  (0) 2020.08.06
[Javascript] ์ˆซ์ž ์„ธ๋ฒˆ์งธ ์ž๋ฆฌ์— ์‰ผํ‘œ ์ถ”๊ฐ€  (0) 2020.08.06
Google Chart - Scatter Chart  (0) 2019.08.21





'Web/JavaScript' Related Articles

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”