使用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的方式，我不知道您为什么要使用表。