如何将数组数据填充到HTML表中

将数组数据填充到HTML表中可以通过以下步骤实现：

创建一个HTML表格的基本结构，包括<table>标签和表头<thead>、表体<tbody>以及表格行<tr>和表格数据<td>等标签。
在JavaScript中，获取要填充的数组数据。可以通过直接定义一个数组，或者从后端接口获取数据。
使用JavaScript的DOM操作，遍历数组数据并动态创建表格行和表格数据。可以使用for循环或者forEach方法遍历数组。
在每次遍历时，创建一个新的表格行<tr>，并在其中创建对应数量的表格数据<td>，将数组中的数据填充到表格数据中。
将表格数据添加到表体<tbody>中。
最后，将填充好数据的表格添加到HTML页面的指定位置，可以通过getElementById等方法获取到指定的HTML元素，并使用appendChild方法将表格添加到该元素中。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Array to HTML Table</title>
</head>
<body>
    <div id="tableContainer"></div>

    <script>
        // 获取要填充的数组数据
        var dataArray = [
            { name: 'John', age: 25, city: 'New York' },
            { name: 'Alice', age: 30, city: 'London' },
            { name: 'Bob', age: 35, city: 'Paris' }
        ];

        // 创建表格
        var table = document.createElement('table');
        var thead = document.createElement('thead');
        var tbody = document.createElement('tbody');

        // 创建表头
        var headerRow = document.createElement('tr');
        var headers = ['Name', 'Age', 'City'];

        headers.forEach(function(header) {
            var th = document.createElement('th');
            th.textContent = header;
            headerRow.appendChild(th);
        });

        thead.appendChild(headerRow);
        table.appendChild(thead);

        // 填充数据
        dataArray.forEach(function(data) {
            var row = document.createElement('tr');

            Object.values(data).forEach(function(value) {
                var td = document.createElement('td');
                td.textContent = value;
                row.appendChild(td);
            });

            tbody.appendChild(row);
        });

        table.appendChild(tbody);

        // 将表格添加到页面
        var tableContainer = document.getElementById('tableContainer');
        tableContainer.appendChild(table);
    </script>
</body>
</html>

这样，数组数据就会被填充到HTML表格中，并显示在页面上。