使用 append() 将行附加到表单，但在提交时不包括附加行中的数据

Question

尝试创建一个可以在需要额外行时附加行的表单，并使用php和jquery将表单提交到数据库。我可以附加行，但当表单提交时，它们会从响应中省略。有人能澄清出了什么问题吗？

表单代码

<table class="material-form">
<thead>
<tr style="display: flex; flex-direction: row; justify-content: space-around;">
<th>Sku</th>
<th>Description</th>
<th>Order</th>
</tr>
</thead>
<?php
$attributes = array('name' => 'count_form');
echo form_open_multipart('request/C_request/new_material_request?wh=' .  strtolower($warehouse['warehouse_name']) , $attributes);
?>
<div >
<tbody style="display: flex; flex-direction: column;">
<tr id="rows">
<td><input type="textarea" id="sku" name="sku[]" onblur="sumFunction()"  style="font-size: 30px; background-color: #DCDCDC; height: 80%; margin-right: 15px" class="col-md-4" ></td>
<td><input type="textarea" id="sku" name="sku[]" onblur="sumFunction()"  style="font-size: 30px; background-color: #DCDCDC; height: 80%; margin-right: 15px" class="col-md-4" ></td>
</tr>
</tbody>
</div>
</table>
<div id="add-row" >add row<p id="counter"></p></div>
<button type="button" class="btn btn-primary btn-lg"  id="accept-count" style="">submit</button>

提交的代码

jQuery(document).ready(function ($) {
$('#add-row').click(function() {
$('#rows').prepend('<td><input type="textarea" id="sku" name="sku[]" onblur="sumFunction()"  style="font-size: 30px; background-color: #DCDCDC; height: 80%; margin-right: 15px" class="col-md-4" ></td>'
)
})

$('#accept-count').click(function () {
document.count_form.submit();
});
});

Answer 1

您的HTML无效。浏览器试图弄清楚你在做什么并呈现它。你不能把form和div元素作为表的子元素。你的html应该看起来像

<form>
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
</form>

现在，按照你处理css和使用flex的方式，我不知道你为什么要使用表。