div的JQuery副本

我正在尝试设置一个表单，其中基于选择框的值1、2、3、4，它将在页面上仅显示以下代码与选择框的值匹配的次数

<div id='guestDetails'>
            <tr>
            <td>Guest ".$cnt."'s Name</td>
            <td>Guest ".$cnt."'s Address</td>
            <td>Guest ".$cnt."'s Phone</td>
            <td>Guest ".$cnt."'s Email</td>
            </tr>

            </tr>
            <tr>
            <td><input type='text' name='guest".$cnt."Name' /></td>
            <td><input type='text' name='guest".$cnt."Address' /></td>
            <td><input type='text' name='guest".$cnt."Phone' /></td>
            <td><input type='text' name='guest".$cnt."Email' /></td>
            </tr>

                </div>

客人姓名：“$cnt.”
客人“$cnt.”的地址
客人“$cnt.”的电话
来宾“$cnt.”的电子邮件

---

因此，如果select的值为2，那么这些输入框将显示2次。如果该值更改为3，则它们将出现3次。不太确定如何完成此操作。

在选择框中添加一个事件侦听器

$("#number_of_inputs").change(function() { /* value has changed */ });

您可以通过在.change回调中获取所选号码

Number($(this).val());

然后编写一个函数，该函数接受一个索引并生成指定的标记，然后清除一个包含div并将函数调用附加到循环中。例如：

$("#number_of_inputs").change(function() {
  $("#container").html("");
  for (var i = 0; i < Number($(this).val()); ++i) {
    $("#container").append(generateForm(i));
  } 
});

$（“输入的数量”）。更改（函数（）{
$（“#容器”）.html（“”）；
对于（var i=0；i

基本方法是：

1） 制作一个我们将复制的隐藏“模板”，以及一个我们将放置副本的容器div：

<div id='guest_detail_template' style='visibility:hidden;position:absolute'>
    <table>
        <tr>
            <td>Guest 's Name</td>
            <td>Guest 's Address</td>
            <td>Guest 's Phone</td>
            <td>Guest 's Email</td>
        </tr>
        <tr>
            <td><input type='text' name='guestName' /></td>
            <td><input type='text' name='guestAddress' /></td>
            <td><input type='text' name='guestPhone' /></td>
            <td><input type='text' name='guestEmail' /></td>
        </tr>
    </table>
</div>
<div id='guest_details'></div>

3） 无论需要多少次调用该函数，或在任何上下文中调用

---

4） 为了使生成的表单有用，您需要知道哪个名称与哪个地址匹配，等等。要做到这一点，您需要为每个

副本中的

使用不同的名称。您可以通过在新项上使用

.find

选择

来完成此操作，然后再次调用

.attr（）

，这次使用一些嵌套函数对模板中指定的名称进行适当的更改。（提示：将当前调用的值

$cnt

作为参数传递给

add（）

，并在适当的地方拼接它。）

首先，您的标记可能是错误的。你不应该在两个tr之间放这样的DIV

以下是复制输入元素的方法：

向包含输入元素的TR添加id，例如

guestInputs

将侦听器添加到select-

$（“#selectID”）。更改（方法名）

在该方法中，使用

$（“#select”）.val（）*1

获取用户选择的数字，并使用它循环并创建新的输入字段，如下所示

var newRow = $("#guestInputs").clone(); // clone the item
newRow.attr("id", "guestInputsNew"); // change the ID to avoid conflict
$("#guestInputs").parent().append(newRow); // append it to the table

---

请注意，在将新行附加到表之前，您可能需要更改新行中的多个ID。

简单地附加HTML在您的情况下不起作用。PHP变量需要硬编码，否则它们将显示为文本。您需要在服务器端执行一些AJAX或为模板编写所有HTML，然后执行一些JavaScript工作。

您可以这样做。这不完全是你正在做的，但我希望你能知道怎么做

HTML:

1.
2.
3.
4.

Javascript:

$(document).ready(function() {
    var append_str = '<input type="text" name="txt[]" value="" /><br />';

    $('#number').change(function() {
        var total = parseInt($(this).val());
        $('#display_section').html(function() {
            var temp_str = '';
            for (i = 0; i < total; i++) {
                temp_str = temp_str + append_str;
            }

            return temp_str;
        });
    });
});

$（文档）.ready（函数（）{
var append_str='
'；
$（'#number'）。更改（函数（）{
var total=parseInt（$（this.val（））；
$（'#display_section'）.html（函数（）{
var temp_str=''；
对于（i=0；i

演示：

---

我以前从未见过

和

标签在

之外使用。很奇怪。编辑：另外，在第一行后面有两个

标记。是否有省略

标记的原因？当然这不是故意的。它们被省略了，因为OP省略了它们，而我在重新格式化内容时没有注意到它们。：）现在应该修好了。这是有道理的。。你能告诉我添加元素id的属性是什么样子的吗？。。。你真的知道jQuery和/或javascript吗？您是否尝试过阅读.attr（）方法的文档？关键是，通过阅读文档，甚至是反复尝试，可以更好地了解其余内容。我不能有意义地“展示它会是什么样子”，而不实际为你做工作。至少，反复尝试可能会导致您提出一个新的、但更精细的问题。那么，如何更改输入的id/名称以避免冲突？name=“guest1name”，name=“guest2name”@Nalley首先尝试理解Javascript代码是如何工作的，答案应该显而易见。提示：调用内部“函数”来创建一个字符串，其中包含几个链接在一起的

标记，然后jQuery将其用作

显示部分的innerHTML。因此，您需要修改该代码，以便在每个附加的
标记的正确位置插入数字。@Nalley:如果您像我一样使用
输入
名称
txt[]
，则在提交表单时，您将在PHP中获得一个数组
txt
。因此，您不需要将输入命名为
guest1name
，
guest2name'，
guest3name`，。。。
<select id="number">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<div id="display_section">
    <input type="text" name="txt[]" value="" />
<div>

$(document).ready(function() {
    var append_str = '<input type="text" name="txt[]" value="" /><br />';

    $('#number').change(function() {
        var total = parseInt($(this).val());
        $('#display_section').html(function() {
            var temp_str = '';
            for (i = 0; i < total; i++) {
                temp_str = temp_str + append_str;
            }

            return temp_str;
        });
    });
});