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>

因此,如果select的值为2,那么这些输入框将显示2次.如果该值更改为3,那么它们将在那里3次.不太确定如何实现这一目标.

Answer 1

基本方法是:

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>

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(),并在适当的位置将其拼接.)