在以下示例中，我们假设有一个数据表，其中包含一些数据。当按钮被点击时，将刷新数据表。

HTML代码：

刷新数据表

  

    

      
列1
      
列2
      
列3
    
  
  

    

      
数据1
      
数据2
      
数据3
    
  

JavaScript代码：

// 获取按钮和数据表元素
const refreshButton = document.getElementById('refreshButton');
const dataTable = document.getElementById('dataTable');

// 定义刷新数据表的函数
function refreshTable() {
  // 清空数据表内容
  dataTable.innerHTML = '';

  // 创建新的表头行
  const thead = document.createElement('thead');
  const headerRow = document.createElement('tr');

  // 创建表头单元格
  const headerCell1 = document.createElement('th');
  headerCell1.textContent = '列1';
  const headerCell2 = document.createElement('th');
  headerCell2.textContent = '列2';
  const headerCell3 = document.createElement('th');
  headerCell3.textContent = '列3';

  // 将表头单元格添加到表头行
  headerRow.appendChild(headerCell1);
  headerRow.appendChild(headerCell2);
  headerRow.appendChild(headerCell3);

  // 将表头行添加到表头
  thead.appendChild(headerRow);

  // 创建新的表体行
  const tbody = document.createElement('tbody');
  const dataRow = document.createElement('tr');

  // 创建表体单元格
  const dataCell1 = document.createElement('td');
  dataCell1.textContent = '新的数据1';
  const dataCell2 = document.createElement('td');
  dataCell2.textContent = '新的数据2';
  const dataCell3 = document.createElement('td');
  dataCell3.textContent = '新的数据3';

  // 将表体单元格添加到表体行
  dataRow.appendChild(dataCell1);
  dataRow.appendChild(dataCell2);
  dataRow.appendChild(dataCell3);

  // 将表体行添加到表体
  tbody.appendChild(dataRow);

  // 将表头和表体添加到数据表
  dataTable.appendChild(thead);
  dataTable.appendChild(tbody);
}

// 绑定按钮点击事件，当按钮被点击时调用刷新数据表的函数
refreshButton.addEventListener('click', refreshTable);

在这个示例中，我们首先获取了按钮和数据表的元素。然后，我们定义了一个名为refreshTable的函数，该函数用于刷新数据表。在这个函数中，我们首先清空了数据表的内容，然后创建了新的表头行和表体行，然后将它们添加到数据表中。

最后，我们使用addEventListener方法将按钮的点击事件绑定到refreshTable函数上，这样当按钮被点击时，就会调用刷新数据表的函数。