DOM对象克隆器Javascript小部件

Question

有人能推荐一个小部件，可以获取现有的DOM对象（如表格行），并将其克隆/添加到原始对象之后的DOM中，并且还可以允许删除它或添加其他对象。

为了更好地解释我想要的内容，这里有一个例子。假设我有一个带有一个初始行（包含若干空字段）的表格。该小部件会在该行侧边添加一个按钮，该按钮将允许添加新行（通过将具有空字段的初始行加倍），还可以在添加的行旁边添加删除按钮，以删除克隆的行，但保留原始行（第一行）。

我发现了一个名为Multi Field Extender的jQuery小部件，类似于这样的功能，但是在Internet Explorer上存在一些问题，禁用了该小部件。我尝试过搜索，但没有找到任何替代品。提前谢谢！

- crazybyte

---

我认为最好手工制作。只需将HTML复制到JavaScript变量中，然后执行 newrow='<tr>..</tr>' 和 <a onclick='$("this").closest("tr").after(newrow)'>。 - bradlis7

Answer 1

假设你的HTML是这样的：

<tr>
  <td>
    <input type = "submit" class = "grow" value = "Add another row" />
  </td>
</tr>

您的jQuery添加新行的代码可能是：

$("input.grow").live('click',function(){
  var $row = $(this).closest('tr');
  $row.clone(true).insertAfter($row);
});

注意：未经测试，但思路可行。

- Quasipickle

Answer 2

从这样的东西开始：

​<table>
  <tr>
    <td><input type="text" /></td>
    <td><input type="checkbox" /></td>
    <td><input type="button" class="addRow" value="Add" /></td>
  </tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

这个 jQuery 可以用来添加/删除功能。

​$(​​​'table').delegate('​​​.addRow', 'click', function() {
  var r= $(this).closest('tr').clone(true);
  if(r.find('.removeRow').length === 0)
   r.append('<td><input type="button" class="removeRow" value="Remove" /></td>');
  r.insertAfter($(this).closest('tr'));
}).delegate('.removeRow', 'click', function() {
  $(this).closest('tr').remove();
});

您可以在此处查看快速演示。 这只取决于添加按钮存在与否，包括行中的任何内容都将被复制，包括输入中的当前值（以及任何事件处理程序等）。 如果需要手动添加添加按钮，则只需在document.ready上添加以下内容来创建它：

$('table tr:first-child')
  .append('<td><input type="button" class="addRow" value="Add" /></td>');
​

- Nick Craver

---

很好。它也复制了值，我认为他试图避免这种情况。可能有一种方法可以删除所有以大约70个字符添加到代码末尾的值。 - bradlis7

由于时间不足，我没有尝试自己编写小部件（我认为这将是一个比实际情况更大的问题），但现在我想我会这样做，对于值（与行重复的值），解决方案非常简单。我可以迭代所有输入元素并在添加新行之前将它们清空。 - crazybyte