Jquery复制并粘贴DOM节点？

Question

我的表格如下所示。

<tr>
  <td>Link Name</td>
  <td><a href="#" class="edit">Edit</a></td>
</tr>

在表格底部我有以下内容。

<tr>
  <form class="hidden create">
    <h3>Add Link</h3>
    ...
    <input type="hidden" name="form_id" value="{menu-id}" />
  </form>
</tr>

为了避免大量的HTML页面，我认为如果jquery可以复制创建表单，调整一些属性然后使它出现在链接行之后会很酷。唯一的问题是如何..

所以这是我的问题。

1）如何获取创建表单并使用jquery将其保存为变量？

2）如何编辑隐藏字段？我知道如何更改属性但是如果表单在变量中，如何选择字段？

3）如何在自己的行上编辑链接后将此表单粘贴到我的表中？我需要像父母一样的东西吗？

感谢加载

Answer 1

1）将表格的副本放在变量中：

var create_form = $('form.create').clone();

2）从变量中获取隐藏的输入：

create_form.find(':hidden[name=form_id]').doSomething()...

3）将.edit链接后的表单放在同一行（我假设这是在事件处理程序中）：

$(this).closest('tr').find('a.edit').after( create_form );

Answer 2

var form = $('#your-form').clone();

这将创建所选元素的副本。如果您现在使用form - 变量，则不会操纵原始文件。

编辑隐藏字段与处理其他DOM元素完全相同：

form.attr('action', 'some-new-action');

您可以使用多种方法“粘贴”表单。可能的解决方案是：

form.appendTo('#some-parent');
form.after('#some-parent');

Answer 3

访问http://api.jquery.com/clone/以获取详细说明。

这是快速预览

HTML

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

的Javascript

$('.hello').clone().appendTo('.goodbye');

输出

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

希望有所帮助......