Как использовать функцию .serialize в jQuery с динамическими элементами формы

Question

Как мне сериализовать входы динамической формы?

<table id="mytable">
<form id="myform">
 <tbody>
   <tr><td><input type="text" name="row0"></td></tr> <!-- dynamically generated -->
   <tr><td><input type="text" name="row1"></td></tr> <!-- dynamically generated -->
   <tr><td><input type="text" name="row2"></td></tr> <!-- dynamically generated -->
   <tr><td><input type="text" name="row3"></td></tr> <!-- dynamically generated -->
 </tbody>
 <tfoot>
   <tr><td><input type="button" id="save" value="SAVE"></td></tr> <!-- static -->
 </tfoot>
</form>
</table>

Я хочу использовать jQuery для загрузки информации с php

$('#save').click(function(){
   $.ajax({
     type: "POST",
     url: "post.php",
     data: $('#myform').serialize(),
     success: function(msg){
         console.log(msg);
     }
   });
});

Это не сработало бы, если бы строки не были сгенерированы динамически, но я не могу понять, как получить доступ или сериализовать динамический контент.

Answer 1

Сериализация динамического содержимого работает нормально, как у вас (так как вы делаете это в обработчике click, а не при загрузке) ... но вам нужно иметь действительный элемент <form>, обернутый вокруг <table> вот так:

<form id="myform">
<table id="mytable">
 <tbody>
   <tr><td><input type="text" name="row0"></td></tr> <!-- dynamically generated -->
   <tr><td><input type="text" name="row1"></td></tr> <!-- dynamically generated -->
   <tr><td><input type="text" name="row2"></td></tr> <!-- dynamically generated -->
   <tr><td><input type="text" name="row3"></td></tr> <!-- dynamically generated -->
 </tbody>
 <tfoot>
   <tr><td><input type="button" id="save" value="SAVE"></td></tr> <!-- static -->
 </tfoot>
</table>
</form>

Вы можете проверить это здесь .