使用用户提交的信息向表中添加一行(HTML/JS)

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>johndoe@example.com</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

<form id="myForm">
  <input type="text" id="nameInput" placeholder="Name">
  <input type="email" id="emailInput" placeholder="Email">
  <input type="number" id="ageInput" placeholder="Age">
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    
    // 获取用户输入的信息
    var name = document.getElementById("nameInput").value;
    var email = document.getElementById("emailInput").value;
    var age = document.getElementById("ageInput").value;
    
    // 创建新的表格行
    var table = document.getElementById("myTable").getElementsByTagName("tbody")[0];
    var row = table.insertRow(table.rows.length); // 在表格最后插入一行
    
    // 添加单元格并填充数据
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = name;
    cell2.innerHTML = email;
    cell3.innerHTML = age;
    
    // 清空表单输入
    document.getElementById("nameInput").value = "";
    document.getElementById("emailInput").value = "";
    document.getElementById("ageInput").value = "";
  });
</script>