单击添加按钮后，如何将上面的所有值填充到下表中？答案

【问题标题】：How to populate all the values above to the table below once I click add button?单击添加按钮后，如何将上面的所有值填充到下表中？
【发布时间】：2023-04-11 00:38:01
【问题描述】：

我有一个问题是如何在单击添加按钮后将上面的所有值填充到下表中。我正在使用 php、jquery 和 html 来创建它。任何人都可以指导我如何在图片下方？我在互联网上搜索以找到解决方案，但无法获得解决方案。图片下方是客户展示我想创建这样的添加表格，如下图所示。希望有人可以指导我或给我举例来解决我的问题。谢谢。

【问题讨论】：

你的问题不清楚。您是否尝试创建另一行？
只是为了清楚。您正在使用上面的表格来获取您的用户输入权限吗？然后处理它并将其添加到您的条目中。这可以通过多种方式完成。从视觉上看，您所做的只是 $(element).append().. 但是，您可能需要使用数据库。因此，您需要将这些值提交到您的服务器。处理它们。然后返回数据或 html 你将 $(element).append();或者你也可以重写所有的行。
那么当您点击按钮时，您想将您在红色方块突出显示的输入字段中输入的值添加到下面表格的字段中吗？请添加填充表单和表格的 html 和相关 php。如果您不使用 JS 或 JQuery，我会坚持使用 PHP，因为您可能会点击按钮来发布值，在这种情况下，这一切都可以通过一种技术来完成。如果您希望前端更改在您点击添加按钮之前填充字段，这将需要 JS 或 JQuery。我假设你想坚持 PHP 是吗？

标签： php html-table

【解决方案1】：

试试这个，看看是否符合你的需要：

HTML：

<form role="form">
  <label for="name"></label>
  <input type="text" id="name">
  <label for="age"></label>
  <input type="number" id="age">
  <label for="gender"></label>
  <input type="text" id="gender">
</form>
<table id="table">
  <thead>
    <th>Name</th>
    <th>Age</th>
    <th>Gender</th>
  </thead>
  <tbody>
    <tr>
      <td>Felipe</td>
      <td>29</td>
      <td>M</td>
    </tr>
  </tbody>
</table>

<button id="addButton">Add</button>

JS：

$('#addButton').click(function(){

  var newTableRow = '<tr><td>'+ $('#name').val() +'</td><td>'+ $('#age').val() +'</td><td>'+ $('#gender').val() +'</td></tr>';

  $('#table tr:last').after(newTableRow);  
})

此脚本可以在您单击按钮保存数据时触发，也可以在您的后端响应后触发。

【讨论】：