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

Question

如何创建一个表单，单击按钮即可添加包含多个输入字段(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 将其输入到同一行时，我想从数据库中获取值。

Answer 1

(根据你的标签，我认为 jQuery 没问题)

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

所以下面的代码:

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

执行向表中添加更多行的基础操作。当然，您还想添加您的类(class)、名称、文本等。

<小时/>

现在，获取 <select> 的所有选项-标记你有两个选择:

1. 如果您有预定数量的选项，则可以离线完成
2. 否则向您的服务器发送请求

第一个解决方案显然更快。您可以简单地使用 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 请求。这显然取决于您如何对服务器进行编程。 (我发现您没有使用 MVC 模型或类似模型，我强烈推荐)

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

<小时/>

摘要:如果始终保证至少有一行，我只需复制 <option>它的一部分，因为这会产生一个干净的 JS，并且不需要使任何事情复杂化。您还只需在 php 中构建 html，而无需在更改某些内容时更新 JS。

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