Creating a table into div using JavaScript

Question

HTML

       <h1>Javascript Playground</h1>

        <div id="first"></div>
        <div id="second"></div>

    </body>

I need to insert a table into the div with this information, including columns for code, title and offering without touching the HTML (only using JavaScript)

let units = [
    {
        'code': 'COMP2110',
        'title': 'Web Technology', 
        'offering': 'S1'
    },  
    {
        'code': 'COMP2010',
        'title': 'Algorithms and Data Structures', 
        'offering': 'S1'
    },

]

norbitrial · Accepted Answer · 2020-04-10 09:00:19Z

1

Probably you can start like the following:

let units = [{'code': 'COMP2110', 'title': 'Web Technology', 'offering': 'S1'}, {'code': 'COMP2010', 'title': 'Algorithms and Data Structures', 'offering': 'S1' } ];

// find your div first
const div = document.getElementById('first');

// building the HTML for the div
let html = `<table>
     <thead>
         <tr>
           ${Object.keys(units[0]).map(e => `<th>${e}</th>`).join('')}
         </tr>
     </thead>`

html += `<tbody>`;
units.forEach(e => html += `<tr>
      ${Object.values(e).map(v => `<td>${v}</td>`).join('')}
</tr>`);

html += `</tbody></table>`;

// adding HTML to your div
div.innerHTML = html;

table, th, td {
  border: 1px solid black;
}

<h1>Javascript Playground</h1>

<div id="first"></div>
<div id="second"></div>

I hope this helps!

answered Apr 10, 2020 at 9:00

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating a table into div using JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related