如何创建一个表单，该表单将在单击按钮时添加包含多个输入字段的行答案

【问题标题】：How to create a form which will add a row that contains multiple input fields onclick of a button如何创建一个表单，该表单将在单击按钮时添加包含多个输入字段的行
【发布时间】：2017-09-26 18:55:17
【问题描述】：

如何创建一个表单，该表单将在单击按钮时添加包含多个输入字段 (php + html) 的行

我的行包含 1 个选择选项和 3 个输入框。

<tr>
   <td>
      <select name="itemname[]" id="itemname" class="form-control" tabindex="1">
         ;
         <option value="">Select item</option>
         <?php
            $sql_item = "SELECT id, item
                        FROM food_exchange_list
                        ORDER by item ASC";
            $result_item = mysqli_query($con, $sql_item);
            if($result_item && $myrow_item = mysqli_fetch_array($result_item))
            {
                do
                {
                    $item_id = $myrow_item["id"];
                    $item_name = $myrow_item["item"];
            ?>
         <option value="<?php echo $item_id;?>"><?php echo $item_name; ?></option>
         <?php
            }
            while($myrow_item = mysqli_fetch_array($result_item));
            }
            ?>
      </select>
   </td>
   <td><input type="number" class="form-control" min="0" max="100" id="exchange" name="exchange[]" required="required" tabindex="3" onchange="compute_protien(this.value)" style="width: 80px;"></td>
   <td>60</td>
   <td>2</td>
   <td>60</td>
   <td>2</td>
</tr>

这是一行的代码。我想在单击添加行按钮时添加类似的行，并且当有人从选择框中选择一个值并使用 php 在同一行中提供它时，我想从数据库中获取值。

【问题讨论】：

您想在运行时动态添加行吗？或者您是否预先知道需要多少个并且只想展示它们？
我想在运行时动态添加行

标签： javascript php jquery html mysql

【解决方案1】：

（根据您的标签，我认为 jQuery 没问题）

您可以使用 append 将 html 元素添加到 jQuery 对象。例如，您可以使用 $('<a>') 为 <a></a> 标记创建 html 对象。

所以下面的代码：

var table = $('table#myTable'); // find the table you want to append to
var newRow = $('<tr>');    // creates a new row
newRow.append($('<td>'));  // creates and appends an empty table data element
table.append(newRow);      // appends the row to your table

完成向表中添加更多行的基础知识。当然，您还想添加您的类、名称、文本等。

现在，要获得<select>-tag 的所有选项，您有两个选择：

如果您有预定数量的选项，您可以离线进行
否则向您的服务器发送请求

第一个解决方案显然更快。您可以使用 PHP 简单地将隐藏数据添加到您的 html 中。通过将data-元素添加到您的表（例如）中所需的最少信息，复制现有行（如果您总是至少有一个），或者您可以构建一个完整的额外行，但隐藏它使用display: none;。

注意：如果这是在表单中，请确保它不会被发送或至少会被服务器忽略。最简单的方法可能是在表单之外添加这些元素。不过我强烈建议在这种情况下使用data 或“复制”选项。

如果您想在添加新行时实时获取数据，您可以使用$.get()。然后让您的服务器回答所需的数据。

对于您的示例，您将发送一个获取所有项目的请求。这可能如下所示：

$.get("server_link_to_get_data.php", function(data, status) {
  /* this is the callback; you should probably build your entire row here */
  $('select#whatever').append($('<option value="' + data + '">'));
}

（很明显，代码并不能完全按照您的意愿执行，因为您需要返回一个 id 和项目名称数组，但工作方式几乎相同）

然后，当然，您还需要让您的服务器使用正确的数据回答 get-request。这显然取决于您如何对服务器进行编程。（我看到你没有使用 MVC 模型或类似的模型，我强烈推荐）

执行此请求可能是最干净的选项，因为它不会污染您的 html，但是，您还需要向您的用户说明，您当前正在处理以避免愤怒点击。（您可以在发送请求之前禁用按钮并在回调中重新启用它）

总结：如果你总是保证至少有一行，我会简单地复制其中的<option> 部分，因为这会产生一个干净的 JS，并且不需要使任何事情复杂化。如果你改变了一些东西，你也只需要在 php 中构建你的 html 而不需要更新你的 JS。

但是，如果您没有那个，那么我可能只是发送一个 GET 请求并从那里构建行。

【讨论】：