如何在点击按钮时显示表格？

<button id="showTableBtn">显示表格</button>
<div id="tableContainer"></div>

#showTableBtn {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

#tableContainer {
  margin-top: 20px;
}

// 获取按钮和表格容器的引用
var showTableBtn = document.getElementById("showTableBtn");
var tableContainer = document.getElementById("tableContainer");

// 定义按钮点击事件的处理函数
showTableBtn.addEventListener("click", function() {
  // 创建表格元素
  var table = document.createElement("table");

  // 创建表头行和表头单元格
  var thead = document.createElement("thead");
  var headerRow = document.createElement("tr");
  var headerCell1 = document.createElement("th");
  var headerCell2 = document.createElement("th");
  headerCell1.textContent = "姓名";
  headerCell2.textContent = "年龄";
  headerRow.appendChild(headerCell1);
  headerRow.appendChild(headerCell2);
  thead.appendChild(headerRow);

  // 创建数据行和数据单元格
  var tbody = document.createElement("tbody");
  var dataRow1 = document.createElement("tr");
  var dataCell1 = document.createElement("td");
  var dataCell2 = document.createElement("td");
  dataCell1.textContent = "张三";
  dataCell2.textContent = "25";
  dataRow1.appendChild(dataCell1);
  dataRow1.appendChild(dataCell2);

  var dataRow2 = document.createElement("tr");
  var dataCell3 = document.createElement("td");
  var dataCell4 = document.createElement("td");
  dataCell3.textContent = "李四";
  dataCell4.textContent = "30";
  dataRow2.appendChild(dataCell3);
  dataRow2.appendChild(dataCell4);

  // 将表头和数据行添加到表格中
  table.appendChild(thead);
  table.appendChild(tbody);
  tbody.appendChild(dataRow1);
  tbody.appendChild(dataRow2);

  // 将表格添加到表格容器中
  tableContainer.appendChild(table);
});