Question

请参阅此表单 - http://schnell.dreamhosters.com/form.php

此表单中有一部分用于输入数据，可以通过单击“添加站点”按钮选择添加更多相同数据，然后该部分将使该部分中的另一个进入另一个站点。这是执行复制的jQuery ......

$(function ()   {
    var sites = 1;
    var siteform = $("#site1").html();

    $(".addsites").live("click", function(e) {
        e.preventDefault();
        sites++;
        $("#events").append("<div id='site" + sites + "'>"
            + "<br /><hr><br />"
            + siteform
            + "<center><button class='removesites' title='site"
            + sites + "'>Remove This Site</button><br />"
            + "<button class='addsites'>Add Another Site</button>"
            + "</center></div>");           
    });

    $(".removesites").live("click", function(e) {
        e.preventDefault();
        var id = $(this).attr("title");
        $("#" + id).remove();
    });     
});

重复工作完美无缺，但有一点让我烦恼的是，当我必须为声称拥有大量网站的人输入数据时，不得不重复此部分表单的相同或类似部分（如每个网站在同一个城市，在同一天，由同一个人等。）所以我有这样的想法，即每次重复，表单元素的值也将继续，我只是编辑不一样的东西。当前实现仅复制元素，而不是数据。我不确定如何轻松地将数据复制到新的部分，我找不到任何jQuery工具来做到这一点。

PS - 这部分并不重要，但我也考虑过使用相同的表格将数据加载回来进行查看/编辑等。唯一的问题是重新打印表单意味着会有一个id为“Site7”的表单部分或者其他东西，但是jQuery总是在1开始编号。我已经考虑使用选择器来找到最高数量的站点，并在该数字处开始变量“站点”，但我不确定如何。任何建议如何做到这一点，或整体上更好的系统，将不胜感激。

Answer 1

你可以考虑使用cloneNode来真正克隆以前的site-div和（通过true传递给cloneNode）它的所有后代及其属性。只知道克隆将与原始版本具有相同的id，因此您必须在之后手动设置其ID

在点击功能中尝试此功能

var clone = $("#site" + sites).clone(true, true); // clone the last div
sites++; // increment the number of divs
clone.attr('id', "site" + sites); // give the clone a unique id
$("#events").append(clone); // append it to the container

正如Scuzzy在评论中指出的那样，jQuery 确实拥有自己的clone()方法（我不使用jQuery，所以我不知道，而且我没有打扰在回答之前检查）。使用jQuery的方法可能比内置的cloneNode DOM方法更好，因为你已经在事件监听器中使用了jQuery。我已经更新了代码

Answer 2

您希望对siteform中的输入字段进行迭代，并使用其name属性作为键将它们存储在对象中。

然后，在复制了您创建的对象并在新的重复表单中查找equivelant字段并设置它们的值。

这样的事情（未经测试，只是想法）

var obj = new Object();

$("#site1 input").each(function(){
    obj[this.id] = this.value;
);

// Dupicate form

$.each(obj, function(key, value){
    $('#newform input[name="'+key+'"]').value = value;
});

请注意，这两个（）函数彼此不同。

http://api.jquery.com/jQuery.each/ http://api.jquery.com/each/

Answer 3

传递值的查询非常简单（请检查表单上所有正确类型的选择器）：

$("#site1").find("input[checked], input:text, input:hidden, input:password, input:submit, option:selected, textarea")
            //.filter(":disabled")
            .each(function()
{
   $('#site2 [name="'+this.name+'"]').val(this.value);
}

Answer 4

好的，我终于想通了。这或多或少是对Alex Pakka答案的扩展。

        sites++;
        $("#events").append("<div id='site" + sites + "'>"
            + "<hr><br />"
            + siteform
            + "<center><button class='removesites' title='site"
            + sites + "'>Remove This Site</button><br />");
        $("#site1").find("input:checked, input:text, textarea, select").each(function() {
            var name = $(this).attr("name");
            var val = $(this).val();
            var checked = $(this).attr("checked");
            var selected = $(this).attr("selectedIndex");

            $('#site' + sites + ' [name="'+name+'"]').val(val);
            $('#site' + sites + ' [name="'+name+'"]').attr("checked", checked);
            $('#site' + sites + ' [name="'+name+'"]').attr("selectedIndex", selected);
        });

为了便于阅读起见，我使用了额外的变量，但如果你没有这样做，它应该做得很好并直接使用这些方法。

Answer 5

别忘了创建一个注册活动的功能！它非常重要，因为在加载DOM时，所有新属性都需要注册到DOM。

小例子：

<script>
    $(document).ready(function(){
        $('#click-me').click(function(){
            registerClickEvent();
        })

        function registerClickEvent(){
            $('<input type="text" name="input_field_example[]">').appendTo('#the-div-you-want')
        }

        registerClickEvent();
    })
</script>

我如何使用jQuery复制表单元素及其中的数据？

5 个答案: