jquery wrap multiple td's в форме onclick

Question

То, что я пытаюсь сделать, это обернуть <form> теги вокруг всех <td>, используя jquery при нажатии кнопки. Таким образом, в основном, когда кнопка нажата, я хочу, чтобы превратить это:

<tr> 
    <td>cell 1</td> 
    <td>cell 2</td> 
    <td><button type="button" class="edit">edit</button></td> 
</tr> 

в этом:

<tr> 
    <form method="post" action=""> 
    <td>cell 1</td> 
    <td>cell 2</td> 
    <td><button type="button" class="edit">edit</button></td> 
    </form> 
</tr> 

Я попытался с помощью insertBefore()/insertAfter(), wrap(), append() и before()/after()

, но они, кажется, либо не работать, либо добавить полный <form method="post" action=""></form> до первого <td>. Вот пример того, что я пытаюсь на данный момент:

$("button.edit").click(function() { 
    $(this).closest('tr').find('td:first-child').before('<form action="post">'); 
    $(this).closest('tr').find('td:last-child').after('</form>'); 
}); 

, но, как упоминалось ранее, он не работает должным образом. Как я могу добавить теги формы в нужное место, как упоминалось ранее?

Answer 1

Пожалуйста, попробуйте следующее:

$("button.edit").click(function() { 
    var form = $('<form method="post" action="" />').append($('tr').children()); 
    $('tr').append(form); 
});