如何使用jQuery的.serialize函数与动态表单元素

时间:2010-09-30 20:57:32

标签: jquery ajax

如何序列化动态表单输入?

<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);
     }
   });
});

如果没有动态生成行,这将没有问题,但我无法弄清楚如何访问或序列化动态内容。

1 个答案:

答案 0 :(得分:12)

序列化动态内容的工作方式很好(因为你在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>

You can test it out here