使用JavaScript动态创建HTML表格并填充数组数据

// 定义一个水果数组
var fruits = ['apple', 'orange', 'grape', 'banana', 'guava', 'watermelon', 'mango'];

/**
 * 动态生成水果表格的函数
 */
function showFruits() {
    // 1. 获取HTML中ID为"fruits-table"的表格元素
    // 注意：这里获取的是整个table元素，如果只想往tbody里添加，可以获取tbody
    const table = document.getElementById("fruits-table");
    // 为了确保每次点击按钮时表格内容是新的，可以先清空旧内容
    // 但由于我们的HTML结构中已经有<thead>，我们只清空<tbody>
    const tbody = table.querySelector('tbody');
    if (tbody) {
        tbody.innerHTML = ''; // 清空现有的所有行
    } else {
        // 如果没有tbody，则创建一个
        const newTbody = document.createElement('tbody');
        table.appendChild(newTbody);
        tbody = newTbody;
    }


    // 2. 遍历水果数组中的每一个元素
    fruits.forEach((fruit, index) => {
        // 3. 为每个水果创建一个新的表格行 (<tr>)
        const tr = document.createElement("tr");

        // 4. 创建用于显示索引的单元格 (<td>)
        const indexTd = document.createElement("td");
        indexTd.innerText = index; // 设置单元格文本为当前索引

        // 5. 创建用于显示水果名称的单元格 (<td>)
        const fruitTd = document.createElement("td");
        fruitTd.innerText = fruit; // 设置单元格文本为当前水果名称

        // 6. 将索引单元格和水果名称单元格添加到当前行 (<tr>) 中
        tr.append(indexTd, fruitTd); // append方法可以同时添加多个子元素

        // 7. 将创建好的行 (<tr>) 添加到表格的 tbody 中
        tbody.append(tr);
    });
}

// 首次加载页面时调用函数，生成表格
// 如果是按钮点击触发，则需要将此函数绑定到按钮的点击事件上
showFruits();

table,
th,
td {
  border: 1px solid #777; /* 设置边框 */
  text-align: center;     /* 文本居中对齐 */
  border-collapse: collapse; /* 合并相邻单元格的边框 */
  padding: 8px;           /* 单元格内边距 */
}

table {
  width: 80%;             /* 表格宽度 */
  margin: 20px auto;      /* 居中显示 */
}

th {
  background-color: #f2f2f2; /* 表头背景色 */
}