使用JavaScript实现HTML表格数据栈式下移与顶部新增功能

嘿，我来帮你搞定这个栈式表格的下移功能！先给你理清楚核心逻辑：让现有数据依次往下挪一行，把顶部位置空出来放新数据，根据你是否需要保留所有历史数据，我准备了两种实现方案：

方案1：固定行数的栈式表格（满了自动丢弃最旧数据） #

这种场景下表格行数固定，新数据压入顶部时，最底部的旧数据会被“挤掉”，完全符合栈的“后进先出”特性。

基础HTML结构 #

先搭好表格和添加数据的交互区：

<!-- 固定行数的栈式表格 -->
<table id="stackTable" border="1">
  <thead>
    <tr>
      <th>数据项1</th>
      <th>数据项2</th>
    </tr>
  </thead>
  <tbody>
    <!-- 预设3行空行或者初始数据 -->
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
  </tbody>
</table>

<input type="text" id="data1" placeholder="输入数据项1">
<input type="text" id="data2" placeholder="输入数据项2">
<button onclick="pushNewData()">添加新数据</button>

JavaScript核心代码 #

// 把所有现有数据下移一行的函数
function shiftRowsDown() {
  const tbody = document.querySelector('#stackTable tbody');
  const rows = tbody.querySelectorAll('tr');
  const rowCount = rows.length;
  
  if (rowCount <= 1) return; // 只有一行的话无需下移

  // 从最后一行开始倒序遍历，把上一行的内容复制到当前行
  for (let i = rowCount - 1; i > 0; i--) {
    const currentRow = rows[i];
    const prevRow = rows[i - 1];
    
    // 逐个单元格复制内容
    for (let j = 0; j < currentRow.cells.length; j++) {
      currentRow.cells[j].textContent = prevRow.cells[j].textContent;
    }
  }
}

// 压入新数据到表格顶部
function pushNewData() {
  const data1 = document.getElementById('data1').value.trim();
  const data2 = document.getElementById('data2').value.trim();
  
  if (!data1 || !data2) {
    alert('请输入完整的两项数据哦！');
    return;
  }

  // 先执行下移操作，空出第一行
  shiftRowsDown();

  // 把新数据填充到第一行
  const firstRow = document.querySelector('#stackTable tbody tr:first-child');
  firstRow.cells[0].textContent = data1;
  firstRow.cells[1].textContent = data2;

  // 清空输入框
  document.getElementById('data1').value = '';
  document.getElementById('data2').value = '';
}

方案2：动态行数的栈式表格（保留所有历史数据） #

如果希望所有旧数据都保留，只需要在表格最顶部插入新行，旧数据会自动“下移”（其实是位置靠后），这种实现更简单：

修改后的JavaScript代码 #

不需要shiftRowsDown函数，直接插入新行即可：

function pushNewData() {
  const data1 = document.getElementById('data1').value.trim();
  const data2 = document.getElementById('data2').value.trim();
  
  if (!data1 || !data2) {
    alert('请输入完整的两项数据哦！');
    return;
  }

  const tbody = document.querySelector('#stackTable tbody');
  // 创建新行并插入到tbody最前面
  const newRow = document.createElement('tr');
  newRow.innerHTML = `<td>${data1}</td><td>${data2}</td>`;
  tbody.insertBefore(newRow, tbody.firstChild);

  // 清空输入框
  document.getElementById('data1').value = '';
  document.getElementById('data2').value = '';
}

对应的HTML表格可以没有预设空行，初始为空也没关系。

效果说明 #

• 方案1演示：假设表格有3行，初始数据是[A,B]、[C,D]、[E,F]，添加新数据[X,Y]后，表格会变成[X,Y]、[A,B]、[C,D]，最旧的[E,F]被丢弃。
• 方案2演示：初始表格有[A,B]、[C,D]，添加新数据[X,Y]后，表格变成[X,Y]、[A,B]、[C,D]，所有数据都保留。

你可以根据实际需求选其中一种方案，要是还有细节需要调整（比如数据是从接口获取、单元格有复杂内容等），随时说就行！

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