使用jQuery克隆和重命名表单元素

Question

使用jQuery克隆和重命名表单元素

18

我正在寻找一种有效的方法，要么是复制/重命名，要么重新创建地址字段以提供在同一页上提交多个地址的功能。因此，以这样一个表单示例为例：

<div id="addresses">
  <div class="address">
    <input type="text" name="address[0].street">
    <input type="text" name="address[0].city">
    <input type="text" name="address[0].zip">
    <input type="text" name="address[0].state">
  </div>
</div>
<a href="" id="add_address">Add address form</a>

据我所理解，有两种方法可以实现此目的：

逐个重新创建表单字段并增加索引，但这种方式有点啰嗦：

var index = $(".address").length;

$('<`input`>').attr({
name: 'address[' + index + '].street',
type: 'text'
}).appendTo(...);

$('<`input`>').attr({
name: 'address[' + index + '].city',
type: 'text'
}).appendTo(...);

$('<`input`>').attr({
name: 'address[' + index + '].zip',
type: 'text'
}).appendTo(...);

$('<`input`>').attr({
name: 'address[' + index + '].state',
type: 'text'
}).appendTo(...);

克隆现有图层并在克隆中替换名称：

$("div.address").clone().appendTo($("#addresses"));

您建议在效率方面使用哪一个？如果是第二个，请指导我如何搜索并替换所有的 [0] 为 [1]（[n]）。谢谢。

- Micor

3个回答

4

如果您编写得当，代码会更简洁 :-) 我可能只会使用克隆和添加。然而，这将导致名称重复。如果您的后端可以正确处理 "address[].street"，那么这不是什么大问题，但是如果不能，您就需要在克隆后进行清理。因此，我建议“将其隐藏在一个整洁的构建器函数中”。

function createAddress (index) {
  return jQuery(replace('\
    <div class="address">\
      <input type="text" name="address[{i}].street">\
      <input type="text" name="address[{i}].city">\
      <input type="text" name="address[{i}].zip">\
      <input type="text" name="address[{i}].state">\
    </div>\
    ', {i: index}))
}

这里的replace是一种简单插值映射的整洁函数。我更喜欢"在看起来像标记的东西中保留标记"。

在这里担心性能可能是不必要的。

- user166390

这绝对是更加明智的做法 :) 我倾向于使用克隆方法的原因是状态实际上是一个选择字段，其中填充了一系列状态列表，因此克隆似乎更容易。我能否在此处以类似的方式使用它，并获取克隆的div的html()，然后使用正则表达式替换索引？ - Micor

0

我相信我正在经历同样的事情，并找到了一些很棒的资源，就像这样：

<script type="text/javascript">
    function trimNums(stringToTrim)
    {
        return stringToTrim.replace(/\d+$/,"");
    }
    function dupForm(divId, divClass, btnAdd, btnRm)
    {
    //alert(divId+'   '+divClass);
        var num     = $(divClass).length;
        var newNum  = new Number(num + 1);
        var i;
        var newElem = $('#' + divId + num).clone().attr('id', divId + newNum).fadeIn('slow');
        for (i=0; i < newElem.children().length; i++)
        {
            var attrId = trimNums(newElem.children(':eq('+i+')').attr('id'));
            var attrName = trimNums(newElem.children(':eq('+i+')').attr('name'));
            newElem.children(':eq('+i+')').attr('id', attrId + newNum).val('');
        }
        $('#' + divId + num).after(newElem);
        $('#' + btnRm).attr('disabled','');
        if (newNum == 15)
            $('#' + btnAdd).attr('disabled','disabled');
    }
    function rmForm(divId, divClass, btnAdd, btnRm)
    {
        var num = $(divClass).length;
        $('#' + divId + num).remove();
        $('#' + btnAdd).attr('disabled','');
        if (num-1 == 1)
            $('#' + btnRm).attr('disabled','disabled');
    }
</script>

而且 HTML 代码是：

<form id="myForm" action="testingForm.php" method="post">
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
    Part #: <input name="part[]" type="text" id="part1" size="10" maxlength="15" />
    Description: <input name="description[]" type="text" id="description1" size="30" maxlength="50" />
    Qty: <input name="quantity[]" type="text" id="quantity1" size="5" maxlength="5" />

....

- Alvizm

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bobince · Accepted Answer

理论上，最简单的方法是克隆然后更改名称：

var newaddress= $("#addresses div.address").eq(0).clone();
newaddress.find('input').each(function() {
    this.name= this.name.replace('[0]', '['+i+']');
});
$('#addresses').append(newaddress);

然而:

a. jQuery 的 clone() 方法非常麻烦。在 IE 上，它将节点序列化为 HTML，使用正则表达式(!) 处理 HTML 字符串以移除其“补丁工作”的内部 ID 属性，然后请求浏览器重新解析它。这是我最不喜欢 jQuery 的部分之一：容易出错，丢失一些信息，并且很慢（虽然速度对你似乎正在做的相当小的工作并不重要）。

浏览器的本地方法 cloneNode(true) 要好得多，但如果您正在进行 jQuery 操作，则无法真正使用它，因为它将复制 jQuery 的内部 ID，可能会混淆其脚本。糟糕。真是个烂摊子。

b. 当更改输入的名称时，无论是像此处一样使用 input.name 还是在示例中使用 attr()，在 IE & lt;=7 中都会存在问题。

特别是，尽管它将提交具有正确控件名称的输入，但它们不会在 form.elements HTMLCollection 中按正确名称索引（或在form本身上，尽管您不应该使用它）。如果您基于 ID 或 jQuery 选择器而不是老式的 HTMLCollection 接口选择输入，则这并不一定是问题。更糟糕的是，如果您使用任何单选按钮，则它们将无法正确地分组。

如果这是您关心的问题，恐怕使用 innerHTML/html() 创建 div 就像 pst 的答案一样是您唯一的选择。（您始终可以将两者相结合，创建使用 HTML 然后使用 text()、attr()、val() 等更改其他属性和文本内容，以避免通常在将文本字符串粘贴到 HTML 中时出现的 HTML 转义问题。）