js创建table

// 创建表格元素
var table = document.createElement('table');
table.border = "1";

// 创建表头
var thead = document.createElement('thead');
var headerRow = document.createElement('tr');
var headers = ['Name', 'Age', 'Country'];
headers.forEach(function(headerText) {
    var th = document.createElement('th');
    th.textContent = headerText;
    headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);

// 创建表体
var tbody = document.createElement('tbody');
var data = [
    {Name: 'Alice', Age: 25, Country: 'USA'},
    {Name: 'Bob', Age: 30, Country: 'Canada'},
    {Name: 'Charlie', Age: 35, Country: 'UK'}
];
data.forEach(function(item) {
    var row = document.createElement('tr');
    Object.values(item).forEach(function(text) {
        var td = document.createElement('td');
        td.textContent = text;
        row.appendChild(td);
    });
    tbody.appendChild(row);
});
table.appendChild(tbody);

// 将表格添加到页面中
document.body.appendChild(table);

var data = [
    {Name: 'Alice', Age: 25, Country: 'USA'},
    {Name: 'Bob', Age: 30, Country: 'Canada'},
    {Name: 'Charlie', Age: 35, Country: 'UK'}
];

var tableHTML = '<table border="1">';
tableHTML += '<thead><tr><th>Name</th><th>Age</th><th>Country</th></tr></thead>';
tableHTML += '<tbody>';

data.forEach(function(item) {
    tableHTML += '<tr>';
    tableHTML += '<td>' + item.Name + '</td>';
    tableHTML += '<td>' + item.Age + '</td>';
    tableHTML += '<td>' + item.Country + '</td>';
    tableHTML += '</tr>';
});

tableHTML += '</tbody></table>';

document.body.innerHTML = tableHTML;

var data = [
    {Name: 'Alice', Age: 25, Country: 'USA'},
    {Name: 'Bob', Age: 30, Country: 'Canada'},
    {Name: 'Charlie', Age: 35, Country: 'UK'}
];

var tableHTML = `
<table border="1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        ${data.map(item => `
            <tr>
                <td>${item.Name}</td>
                <td>${item.Age}</td>
                <td>${item.Country}</td>
            </tr>
        `).join('')}
    </tbody>
</table>
`;

document.body.innerHTML = tableHTML;