div 的 JQuery 副本

Question

我正在尝试设置一个表单，其中基于选择框的值 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>

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

Answer 1

基本方法是:

1) 制作一个我们将复制的隐藏"template"，以及一个我们将放置副本的容器 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>

2) 设置一个函数，将模板的副本添加到容器中。您使用 .clone() JQuery 选择的方法来制作副本，修复样式以使副本不被隐藏，并使用 append在容器上(选择它之后)将新元素放在末尾。

function add() {
    var item = $('#guest_detail_template').clone();
    item.attr({'style': ''});
    $('#guest_details').append(item);
}

3) 必要时或在任何上下文中调用该函数。

4) 为了使生成的表单有用，您需要知道哪个名称对应哪个地址等。为此，您需要为 <input> 使用不同的名称。每个 <div> 中的 s复制。您可以使用 .find 来做到这一点在新项目上选择 <input> s，然后调用 .attr()再次，这次使用一些嵌套函数对模板中指定的名称进行适当的更改。 (提示:将您当前调用的值 $cnt 作为参数传递给 add() ，并在适当的地方拼接。)