使用MockAPI的纯JS CRUD：优化buildTable函数实现仅新增数据行

我完全懂你现在的困扰——每次新增数据后都要把整个表格重新渲染一遍，既浪费性能，用户看着表格闪一下也不舒服。咱们来改造这个buildTable函数，让它能根据不同场景智能处理：要么初始化整个表格（比如首次GET数据时），要么只把新数据追加到表格末尾（新增数据成功后）。

第一步：重构buildTable函数，添加场景判断参数 #

首先给函数加一个可选参数（比如shouldAppend），默认值设为false。当这个参数为false时，执行原来的“重建整个表格”逻辑；当为true时，只创建新数据对应的行，追加到现有表格的tbody里。

假设你原来的函数大概是这样的：

function buildTable(data) {
  const table = document.getElementById('data-table');
  // 清空表格
  table.innerHTML = '';
  // 创建表头
  const headerRow = document.createElement('tr');
  Object.keys(data[0]).forEach(key => {
    const th = document.createElement('th');
    th.textContent = key;
    headerRow.appendChild(th);
  });
  table.appendChild(headerRow);
  // 创建数据行
  data.forEach(item => {
    const row = document.createElement('tr');
    Object.values(item).forEach(value => {
      const td = document.createElement('td');
      td.textContent = value;
      row.appendChild(td);
    });
    table.appendChild(row);
  });
}

改造后的版本：

function buildTable(data, shouldAppend = false) {
  const table = document.getElementById('data-table');
  
  // 场景1：初始化表格（首次加载或刷新数据）
  if (!shouldAppend) {
    // 清空表格并创建表头
    table.innerHTML = '';
    const headerRow = document.createElement('tr');
    Object.keys(data[0]).forEach(key => {
      const th = document.createElement('th');
      th.textContent = key;
      headerRow.appendChild(th);
    });
    table.appendChild(headerRow);
  }

  // 场景2/3：创建数据行（初始化时全量创建，新增时只追加新行）
  data.forEach(item => {
    const row = document.createElement('tr');
    Object.values(item).forEach(value => {
      const td = document.createElement('td');
      td.textContent = value;
      row.appendChild(td);
    });
    table.appendChild(row);
  });
}

第二步：在不同场景下调用函数 #

• GET数据后初始化表格：正常调用，不需要传第二个参数，默认重建整个表格

// 假设你用fetch获取MockAPI数据
fetch('https://your-mock-api-url.com/data')
  .then(res => res.json())
  .then(data => {
    buildTable(data); // 重建整个表格
  });

• POST提交数据成功后追加新行：调用时传入true作为第二个参数，只添加新数据的行

// 提交新数据到MockAPI
const newData = { name: 'New Item', value: '123' };
fetch('https://your-mock-api-url.com/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(newData)
})
.then(res => res.json())
.then(createdItem => {
  // 只追加新创建的这一行，不用重建整个表格
  buildTable([createdItem], true);
});

额外优化点（可选） #

如果你的表格有操作列（比如编辑、删除按钮），可以把创建操作列的逻辑抽成单独的函数，比如createActionButtons(row, itemId)，这样不管是初始化还是追加行，都能复用这部分逻辑，避免代码重复。

这样改造后，新增数据时就不用再重新渲染整个表格了，既提升了性能，也让页面交互更流畅～

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