JavaScript中为表格预留空间，避免行增减时布局变动的实现方案

你遇到的问题本质是删除行后DOM元素被移除，对应的布局空间也随之释放，导致其他行挤占位置。要让表格布局稳定，核心思路是保留被删除行原本占据的空间，下面给你两种实用的实现方案：

方案一：隐藏行而非删除（适合需要恢复行的场景） #

不需要从DOM中移除行，而是通过CSS让它不可见，但仍然占据布局空间。这种方法操作简单，还能随时恢复行的显示。

修改你的删除逻辑：

// 替换原来的 row.remove() 代码
targetRow.style.visibility = 'hidden';
// 可选：如果行内有内容，可清空避免视觉干扰（但空间仍保留）
targetRow.innerHTML = '';

如果之后需要恢复该行，只需要设置：

targetRow.style.visibility = 'visible';
// 恢复内容（如果之前清空了的话）

方案二：插入占位行（适合彻底删除行的场景） #

如果必须从DOM中移除目标行，可以在删除前插入一个高度与目标行一致的空行作为占位，确保布局空间不被挤占。

首先在CSS中定义占位行的样式：

#test tr {
  /* 给所有行设置固定高度，保证占位行和正常行高度一致 */
  height: 45px;
}
.placeholder-row {
  /* 可选：去掉占位行的边框，避免视觉干扰 */
  border: none;
  background: transparent;
}

然后修改删除逻辑：

// 获取要删除的行的位置
const rowIndex = targetRow.rowIndex;
// 创建占位行并插入到原位置
const placeholderRow = table.insertRow(rowIndex);
placeholderRow.className = 'placeholder-row';
// 移除原行
targetRow.remove();

额外优化：固定表格布局 #

为了让整个表格的列宽也保持稳定，可以给表格添加table-layout: fixed样式：

#test {
  table-layout: fixed;
  width: 100%; /* 固定表格宽度 */
}

这样不管行的显示状态如何，表格的整体布局（行高、列宽）都会保持稳定，不会因为行的增删而发生偏移。

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