js 创建一个table

在 JavaScript 中创建一个 HTML 表格（table）可以通过多种方式实现，以下是几种常见的方法：

方法一：使用 DOM 操作

你可以使用 JavaScript 动态地创建表格元素并添加到页面中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态创建表格</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <div id="table-container"></div>

    <script>
        // 数据源
        const data = [
            { name: 'Alice', age: 24, gender: 'Female' },
            { name: 'Bob', age: 28, gender: 'Male' },
            { name: 'Charlie', age: 22, gender: 'Male' }
        ];

        // 创建表格元素
        const table = document.createElement('table');

        // 创建表头
        const thead = document.createElement('thead');
        const headerRow = document.createElement('tr');
        Object.keys(data[0]).forEach(key => {
            const th = document.createElement('th');
            th.textContent = key.toUpperCase();
            headerRow.appendChild(th);
        });
        thead.appendChild(headerRow);
        table.appendChild(thead);

        // 创建表体
        const tbody = document.createElement('tbody');
        data.forEach(item => {
            const row = document.createElement('tr');
            Object.values(item).forEach(value => {
                const td = document.createElement('td');
                td.textContent = value;
                row.appendChild(td);
            });
            tbody.appendChild(row);
        });
        table.appendChild(tbody);

        // 将表格添加到页面中
        document.getElementById('table-container').appendChild(table);
    </script>
</body>
</html>

方法二：使用字符串拼接

你也可以通过拼接 HTML 字符串来创建表格，然后将其插入到页面中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态创建表格</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <div id="table-container"></div>

    <script>
        // 数据源
        const data = [
            { name: 'Alice', age: 24, gender: 'Female' },
            { name: 'Bob', age: 28, gender: 'Male' },
            { name: 'Charlie', age: 22, gender: 'Male' }
        ];

        // 创建表格字符串
        let tableHTML = '<table>';
        tableHTML += '<thead><tr>';
        Object.keys(data[0]).forEach(key => {
            tableHTML += `<th>${key.toUpperCase()}</th>`;
        });
        tableHTML += '</tr></thead>';
        tableHTML += '<tbody>';
        data.forEach(item => {
            tableHTML += '<tr>';
            Object.values(item).forEach(value => {
                tableHTML += `<td>${value}</td>`;
            });
            tableHTML += '</tr>';
        });
        tableHTML += '</tbody></table>';

        // 将表格添加到页面中
        document.getElementById('table-container').innerHTML = tableHTML;
    </script>
</body>
</html>

方法三：使用模板引擎

如果你使用的是前端框架（如 React、Vue 等），可以使用相应的模板语法来创建表格。

Vue.js 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态创建表格</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th v-for="key in columns" :key="key">{{ key.toUpperCase() }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(row, index) in data" :key="index">
                    <td v-for="value in row" :key="value">{{ value }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                columns: ['name', 'age', 'gender'],
                data: [
                    { name: 'Alice', age: 24, gender: 'Female' },
                    { name: 'Bob', age: 28, gender: 'Male' },
                    { name: 'Charlie', age: 22, gender: 'Male' }
                ]
            }
        });
    </script>
</body>
</html>