使用 JavaScript 在 div 中创建表格

Question

超文本标记语言

       <h1>Javascript Playground</h1>

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

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

    </body>

我需要在 div 中插入一个包含此信息的表格，包括代码、标题和产品列，而不接触 HTML（仅使用 JavaScript）

let units = [

    {

        'code': 'COMP2110',

        'title': 'Web Technology', 

        'offering': 'S1'

    },  

    {

        'code': 'COMP2010',

        'title': 'Algorithms and Data Structures', 

        'offering': 'S1'

    },

]

Answer 1

也许你可以像下面这样开始：let units = [{'code': 'COMP2110', 'title': 'Web Technology', 'offering': 'S1'}, {'code': 'COMP2010', 'title': 'Algorithms and Data Structures', 'offering': 'S1' } ];// find your div firstconst div = document.getElementById('first');// building the HTML for the divlet html = `<table>&nbsp; &nbsp; &nbsp;<thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;${Object.keys(units[0]).map(e => `<th>${e}</th>`).join('')}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</tr>&nbsp; &nbsp; &nbsp;</thead>`html += `<tbody>`;units.forEach(e => html += `<tr>&nbsp; &nbsp; &nbsp; ${Object.values(e).map(v => `<td>${v}</td>`).join('')}</tr>`);html += `</tbody></table>`;// adding HTML to your divdiv.innerHTML = html;table, th, td {&nbsp; border: 1px solid black;}<h1>Javascript Playground</h1><div id="first"></div><div id="second"></div>