使用 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 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>