如何使用户输入的数据显示在表头下方

要实现用户输入的数据显示在表头下方，可以通过以下步骤：

创建一个包含表头和数据的HTML表格。表头通常使用<th>标签，数据使用<td>标签。
使用JavaScript监听用户的输入事件，例如onkeyup或onchange事件。
在事件处理程序中，获取用户输入的数据。
创建一个新的表格行（<tr>标签）来显示用户输入的数据。
将用户输入的数据插入到新的表格行中的单元格（<td>标签）中。
将新的表格行插入到表格的末尾，以显示在表头下方。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>用户输入数据显示在表头下方</title>
</head>
<body>
  <table id="data-table">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <!-- 这里是用户输入的数据行 -->
    </tbody>
  </table>

  <form>
    <label for="name">姓名：</label>
    <input type="text" id="name" onkeyup="displayData()" /><br />

    <label for="age">年龄：</label>
    <input type="number" id="age" onkeyup="displayData()" /><br />

    <label for="gender">性别：</label>
    <select id="gender" onchange="displayData()">
      <option value="">请选择</option>
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
  </form>

  <script>
    function displayData() {
      // 获取用户输入的数据
      var name = document.getElementById("name").value;
      var age = document.getElementById("age").value;
      var gender = document.getElementById("gender").value;

      // 创建新的表格行
      var newRow = document.createElement("tr");

      // 创建并插入单元格
      var nameCell = document.createElement("td");
      nameCell.textContent = name;
      newRow.appendChild(nameCell);

      var ageCell = document.createElement("td");
      ageCell.textContent = age;
      newRow.appendChild(ageCell);

      var genderCell = document.createElement("td");
      genderCell.textContent = gender;
      newRow.appendChild(genderCell);

      // 将新的表格行插入到表格的末尾
      var tableBody = document.querySelector("#data-table tbody");
      tableBody.appendChild(newRow);
    }
  </script>
</body>
</html>

这个示例代码创建了一个包含姓名、年龄和性别的表格。用户在输入框和下拉列表中输入数据后，会触发displayData()函数，该函数会将用户输入的数据创建为新的表格行，并插入到表格的末尾。

注意：这个示例代码只是一个简单的演示，实际应用中可能需要进行数据验证和安全性处理。