如何实现添加数据前显示10个占位空行的表格并通过JS依次填充

我懂你要的效果——初始显示10个空行占住位置，后续用JS把数据依次填进去，之前单个高行的方式不行是因为它只是个跨列的单行，既没法对应每一列的结构，也没法让JS精准填充到“每一行”的位置。下面是具体实现方案：

1. 正确的HTML结构 #

要创建结构完整的10个空行，每个行里的<td>数量必须和表头一致（这里是10个），同时给空行加专属类empty-row，方便后续JS定位：

<table>
  <thead>
    <tr>
      <th>ID ARTICULO</th>
      <th>NOMBRE</th>
      <th>FORMATO</th>
      <th>CANTIDAD</th>
      <th>POR</th>
      <th>TOTAL</th>
      <th>LOTE</th>
      <th>FECHA VENC</th>
      <th>Valor Tot</th>
      <th>Valor Unit</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <!-- 重复10次的空行，每行包含10个td -->
    <tr class="empty-row">
      <td></td><td></td><td></td><td></td><td></td>
      <td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr class="empty-row">
      <td></td><td></td><td></td><td></td><td></td>
      <td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr class="empty-row">
      <td></td><td></td><td></td><td></td><td></td>
      <td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr class="empty-row">
      <td></td><td></td><td></td><td></td><td></td>
      <td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr class="empty-row">
      <td></td><td></td><td></td><td></td><td></td>
      <td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr class="empty-row">
      <td></td><td></td><td></td><td></td><td></td>
      <td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr class="empty-row">
      <td></td><td></td><td></td><td></td><td></td>
      <td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr class="empty-row">
      <td></td><td></td><td></td><td></td><td></td>
      <td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr class="empty-row">
      <td></td><td></td><td></td><td></td><td></td>
      <td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr class="empty-row">
      <td></td><td></td><td></td><td></td><td></td>
      <td></td><td></td><td></td><td></td><td></td>
    </tr>
  </tbody>
</table>

2. CSS样式设置占位高度 #

给空行的单元格设置固定高度，确保总占位和你想要的500px一致（10行×50px），也可以根据需求调整高度：

.empty-row td {
  height: 50px; /* 每行高度，10行总高度500px */
  border: 1px solid #eee; /* 可选：让空行结构更清晰 */
  background-color: #f9f9f9; /* 可选：区分空行和已填充行 */
}

3. JS代码实现填充逻辑 #

下面是示例代码，模拟数据填充，会依次把数据填入空行，填充后移除empty-row类；如果数据超过10条，还可以新增行：

// 模拟要添加的商品数据
const articleData = [
  { 
    id: "ART001", nombre: "Producto A", formato: "500ml", 
    cantidad: 10, por: 5, total: 50, lote: "LOT2024", 
    fechaVenc: "2024-12-31", valorTot: 250, valorUnit: 25 
  },
  { 
    id: "ART002", nombre: "Producto B", formato: "1L", 
    cantidad: 5, por: 2, total: 10, lote: "LOT2024", 
    fechaVenc: "2024-11-30", valorTot: 150, valorUnit: 15 
  },
  // 可以添加更多数据...
];

// 获取所有空行
const emptyRows = document.querySelectorAll('.empty-row');

// 依次填充数据到空行
articleData.forEach((data, index) => {
  // 如果数据数量超过空行数量，停止填充
  if (index >= emptyRows.length) return;
  
  const targetRow = emptyRows[index];
  const cells = targetRow.querySelectorAll('td');
  
  // 对应每个列赋值
  cells[0].textContent = data.id;
  cells[1].textContent = data.nombre;
  cells[2].textContent = data.formato;
  cells[3].textContent = data.cantidad;
  cells[4].textContent = data.por;
  cells[5].textContent = data.total;
  cells[6].textContent = data.lote;
  cells[7].textContent = data.fechaVenc;
  cells[8].textContent = data.valorTot;
  cells[9].textContent = data.valorUnit;
  
  // 移除空行类，标记为已填充
  targetRow.classList.remove('empty-row');
});

// 新增行函数：当数据超过10条时调用
function addNewArticleRow(data) {
  const tbody = document.getElementById('table-body');
  const newRow = document.createElement('tr');
  
  // 生成新行的单元格内容
  newRow.innerHTML = `
    <td>${data.id}</td>
    <td>${data.nombre}</td>
    <td>${data.formato}</td>
    <td>${data.cantidad}</td>
    <td>${data.por}</td>
    <td>${data.total}</td>
    <td>${data.lote}</td>
    <td>${data.fechaVenc}</td>
    <td>${data.valorTot}</td>
    <td>${data.valorUnit}</td>
  `;
  
  tbody.appendChild(newRow);
}

// 示例：添加第11条数据
// addNewArticleRow({ id: "ART011", nombre: "Producto K", ... });

这个方案完全符合你的需求：初始有10个空行占住空间，后续JS可以精准填充每个空行的位置，超出10条后还能继续新增行。

内容的提问来源于stack exchange，提问作者RPlaza