如何在Ajax请求时清空表格内容？

嘿，这是个很实用的需求，我给你分享几种简单可靠的实现方式，都是基于你提供的表格结构（tbody的id是people）：

方法一：原生JavaScript实现 #

直接获取到目标tbody元素，清空它的内部HTML即可，这种方法不需要依赖任何框架，兼容性拉满：

// 在发起Ajax请求前执行这行代码
document.getElementById('people').innerHTML = '';

原理是把#people元素的所有子节点（也就是之前的表格行）全部替换为空字符串，瞬间清空表格内容。

方法二：jQuery实现（如果你用jQuery做Ajax） #

如果你的项目里已经引入了jQuery，那可以用更简洁的API：

// 方式1：使用empty()方法，专门用于清空子元素
$('#people').empty();

// 方式2：设置html为空字符串，效果和上面一致
$('#people').html('');

最佳实践：把清空操作放在请求发起前 #

不管用哪种方法，都要确保清空操作在Ajax请求发送之前执行，这样可以避免旧数据残留，同时给用户反馈（表格变空，表示正在加载新内容）。这里给你两个完整的示例：

原生Fetch API示例 #

// 第一步：清空表格
document.getElementById('people').innerHTML = '';

// 第二步：发起Ajax请求
fetch('你的接口地址')
  .then(response => response.json())
  .then(data => {
    // 这里是填充新数据到表格的逻辑
    data.forEach((person, index) => {
      const row = document.createElement('tr');
      row.innerHTML = `
        <td>${index + 1}</td>
        <td>${person['Ф.И.О']}</td>
        <td>${person['Дата рождения']}</td>
        <td>${person['Телефон']}</td>
        <td>${person['График']}</td>
        <td>${person['Адрес']}</td>
        <td>${person['Паспортные данные']}</td>
        <td>${person['Мед Книжка']}</td>
      `;
      document.getElementById('people').appendChild(row);
    });
  })
  .catch(error => console.error('请求出错啦:', error));

jQuery Ajax示例 #

$.ajax({
  url: '你的接口地址',
  method: 'GET',
  // 请求发起前先清空表格
  beforeSend: function() {
    $('#people').empty();
  },
  success: function(data) {
    // 填充新数据
    $.each(data, function(index, person) {
      const row = `
        <tr>
          <td>${index + 1}</td>
          <td>${person['Ф.И.О']}</td>
          <td>${person['Дата рождения']}</td>
          <td>${person['Телефон']}</td>
          <td>${person['График']}</td>
          <td>${person['Адрес']}</td>
          <td>${person['Паспортные данные']}</td>
          <td>${person['Мед Книжка']}</td>
        </tr>
      `;
      $('#people').append(row);
    });
  },
  error: function(xhr, status, error) {
    console.error('请求失败:', error);
  }
});

这样操作之后，每次发起Ajax请求时，表格里的旧数据都会被清空，然后再加载新的内容，不会出现新旧数据混杂的情况啦～

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