使用 append() 将行追加到表单，但是当它提交时它不包括来自追加行的数据[重复]

Posted 2023-05-08

【中文标题】使用 append() 将行追加到表单，但是当它提交时它不包括来自追加行的数据[重复]

【英文标题】：Append row to form with append() but when it submits it doesn't include the data from appended rows [duplicate]

【发布时间】：2022-01-13 12:08:05

【问题描述】：

尝试制作一个可以在需要额外行时附加行的表单，并使用 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();

    );

);

【问题讨论】：

表单标签不是表格元素的子元素。 div 元素不是表的子元素。它不起作用，因为您的 html 无效

表格用于表格数据，而不是表格。阅读语义标记。

【参考方案1】：

您的 HTML 无效。浏览器试图找出你在做什么并呈现它。您不能将表单和 div 元素作为表的子元素。你的 html 应该是这样的

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

现在你正在使用它的 css 并使用 flex，我不确定你为什么还要使用表格。