Question

我正在使用jquery在html中添加额外的行。以下代码为我工作，但当我尝试提交表单时，＆amp; _POST数组中缺少额外的行字段。请检查代码并告诉我，如何解决此问题..

Jquery的

<script type="text/javascript">
$(document).ready(function(){
var cnt = 2;

$("#anc_add").click(function(){
$('#tbl1 tr').last().after('<tr><td><input type="text" name="title[]" value=""></td><td><input type="text" name="body[]" value=""></td><td><input type="text" name="sound_url[]" value=""></td><td><input type="text" name="id[]" value=""></td></tr>');
cnt++;
});

$("#anc_rem").click(function(){
$('#tbl1 tr:last-child').remove();
});

});

</script>

HTML

   <table id="tbl1" width="700" height="0" border="0" style="margin-top:20px">
    <tbody>
    <tr>
    <th width="220" bgcolor="#999999" scope="col" height="35"><span style="color: #FFFFFF">Title</span></th>
    <th width="220" bgcolor="#999999" scope="col" height="35"><span style="color: #FFFFFF">Body</span></th>
    <th width="220" bgcolor="#999999" scope="col" height="35"><span style="color: #FFFFFF">ID</span></th>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td><i class="icon-plus"></i><a style="color:black" href="javascript:void(0);" id='anc_add'>Add Row</a><i style="margin-left:30px" class="icon-minus"></i><a style="color:black" href="javascript:void(0);" id='anc_rem'>Remove Row</a></td>
    </tr>

    <tr>
    <td><input type="text" name="title[]" value="" /></td>
    <td><input type="text" name="body[]" value="" /></td>
    <td><input type="text" name="url[]" value="" /></td>
    <td><input type="hidden" name="id[]" value="" /></td>
    </tr>

   </tbody>
   </table>

我在这张桌子上还有另外两张桌子

像这样的东西

<table class="table">
</table>

<table width="700" border="0" style="size:10px;">
</table>

当我删除这些，问题已解决时，我如何解决这个问题？

HTML表单

 <form name="myForm" id="myForm" action="" method="POST" accept-charset="utf-8" enctype="multipart/form-data">

<input type="submit" name="submit" value="Save" class="btn btn-success" id="SubmitForm" />

Answer 1

在JsFiddle中查看此代码 -

http://jsfiddle.net/ku9mL/1/

它适用于动态行。

    $('#SubmitForm').click(function(e){

    var postData = $('#myForm').serializeArray();
    $(postData).each(function(i, field){ 
        alert(field.name+"="+field.value);
    });
});

Answer 2

您的最终HTML标记应如下所示：

<form name="myForm" id="myForm" action="" method="POST" accept-charset="utf-8" enctype="multipart/form-data">

<table class="table">
</table>

<table width="700" border="0" style="size:10px;">
</table>

<table id="tbl1" width="700" height="0" border="0" style="margin-top:20px">
<tbody>
<tr>
<th width="220" bgcolor="#999999" scope="col" height="35"><span style="color: #FFFFFF">Title</span></th>
<th width="220" bgcolor="#999999" scope="col" height="35"><span style="color: #FFFFFF">Body</span></th>
<th width="220" bgcolor="#999999" scope="col" height="35"><span style="color: #FFFFFF">ID</span></th>
</tr>
<tr>
<td></td>
<td></td>
<td><i class="icon-plus"></i><a style="color:black" href="javascript:void(0);" id='anc_add'>Add Row</a><i style="margin-left:30px" class="icon-minus"></i><a style="color:black" href="javascript:void(0);" id='anc_rem'>Remove Row</a></td>
</tr>

<tr>
<td><input type="text" name="title[]" value="" /></td>
<td><input type="text" name="body[]" value="" /></td>
<td><input type="text" name="url[]" value="" /></td>
<td><input type="hidden" name="id[]" value="" /></td>
</tr>

</tbody>
</table>


<input type="submit" name="submit" value="Save" class="btn btn-success" id="SubmitForm" />

</form>

Jquery在HTML中添加额外行但在POST中未提交数据

2 个答案: