js如何实现添加表格以及在表格上显示内容，如下图效果

要在 JavaScript 中实现添加表格并显示内容，可以通过 DOM 操作来动态创建表格元素，并填充数据。以下是详细的步骤和示例代码：

实现步骤：

1. 创建 HTML 结构：

   • 在 HTML 文件中添加一个用于显示表格的容器，例如一个 <div> 元素：

     html
     复制代码
     <div id="table-container"></div>
     

2. 编写 JavaScript 代码：

   • 使用 JavaScript 动态创建表格，并填充数据。

示例代码：

javascript
复制代码
// 1. 获取表格容器的引用
var tableContainer = document.getElementById('table-container');

// 2. 创建表格元素
var table = document.createElement('table');
table.setAttribute('border', '1'); // 设置表格边框

// 3. 创建表头（可选）
var thead = document.createElement('thead');
var headerRow = document.createElement('tr');

// 表头内容
var headers = ['姓名', '年龄', '性别'];
headers.forEach(function(headerText) {
    var th = document.createElement('th');
    th.textContent = headerText;
    headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);

// 4. 创建表格内容（行和列）
var tbody = document.createElement('tbody');

// 示例数据
var data = [
    { name: '张三', age: 28, gender: '男' },
    { name: '李四', age: 32, gender: '女' },
    { name: '王五', age: 25, gender: '男' }
];

// 循环添加每行数据
data.forEach(function(person) {
    var row = document.createElement('tr');

    // 添加每列数据
    var nameCell = document.createElement('td');
    nameCell.textContent = person.name;
    row.appendChild(nameCell);

    var ageCell = document.createElement('td');
    ageCell.textContent = person.age;
    row.appendChild(ageCell);

    var genderCell = document.createElement('td');
    genderCell.textContent = person.gender;
    row.appendChild(genderCell);

    // 将行添加到 tbody 中
    tbody.appendChild(row);
});

// 将 tbody 添加到表格中
table.appendChild(tbody);

// 5. 将表格添加到页面中的表格容器中
tableContainer.appendChild(table);

解释和关键点：

• 动态创建表格：使用 document.createElement 方法创建 <table>、<thead>、<tbody>、<tr>、<th> 和 <td> 元素。
• 填充表头和内容：使用循环遍历数据，并将数据填充到表格的每行每列中。
• 添加到页面：通过 appendChild 方法将创建的表格元素添加到 HTML 页面中的指定容器中。

这样的实现方式可以动态生成并填充表格内容，适用于需要动态展示数据的情况，例如从后端接收到的数据或用户输入的数据。