Skip to content

Instantly share code, notes, and snippets.

@yitonghe00

yitonghe00/Eloquent JavaScript 1401 Build a table.html

Created May 12, 2022 04:06
Show Gist options
  • Save yitonghe00/9d844017747dccc13a89a0cfe2cf2db2 to your computer and use it in GitHub Desktop.
Save yitonghe00/9d844017747dccc13a89a0cfe2cf2db2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. yitonghe00 created this gist May 12, 2022.
    41 changes: 41 additions & 0 deletions Eloquent JavaScript 1401 Build a table.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,41 @@
    <h1>Mountains</h1>

    <div id="mountains"></div>

    <script>
    const MOUNTAINS = [
    {name: "Kilimanjaro", height: 5895, place: "Tanzania"},
    {name: "Everest", height: 8848, place: "Nepal"},
    {name: "Mount Fuji", height: 3776, place: "Japan"},
    {name: "Vaalserberg", height: 323, place: "Netherlands"},
    {name: "Denali", height: 6168, place: "United States"},
    {name: "Popocatepetl", height: 5465, place: "Mexico"},
    {name: "Mont Blanc", height: 4808, place: "Italy/France"}
    ];

    const createCell = (row, cellTag, cellText) => {
    const cell = document.createElement(cellTag);
    if (typeof cellText === 'number') {
    cell.style.textAlign = 'right';
    }
    cell.appendChild(document.createTextNode(cellText));
    row.appendChild(cell);
    };

    const mountains = document.querySelector('#mountains');
    const table = document.createElement('table');

    const keys = Object.keys(MOUNTAINS[0]);
    const tableHeads = document.createElement('tr');
    keys.forEach(key => createCell(tableHeads, 'th', key));
    table.appendChild(tableHeads);

    MOUNTAINS.forEach((mountain) => {
    const tr = document.createElement('tr');
    Object.keys(mountain).forEach(key => createCell(tr, 'td', mountain[key]));
    table.appendChild(tr);
    });

    mountains.appendChild(table);

    </script>