在处理包含动态添加行的表单时，若提交后新增数据缺失，通常源于不正确的HTML结构。本文将深入探讨`form`、`table`及相关元素的正确嵌套方式，强调HTML语义对表单提交行为的关键影响。通过修正无效的结构，并结合J*aScript动态添加行，确保所有用户输入，包括动态生成的部分，都能被成功捕获并提交。

理解动态表单行数据丢失的根本原因

当用户在网页表单中动态添加行（例如，通过点击“添加行”按钮增加输入字段），但提交表单后这些新增行的数据却未能包含在请求中时，这通常不是J*aScript代码本身的问题，而是底层HTML结构存在缺陷。浏览器在解析HTML文档时，会尝试修正任何无效的或不符合规范的结构。这种自动修正行为可能导致DOM树与开发者预期不符，特别是当form元素与table元素不正确嵌套时。

具体来说，HTML规范严格定义了元素的父子关系。form元素不能直接作为table、tbody或tr的子元素。同样，div元素也不应直接作为table、tbody或tr的子元素。当出现如

...或 ...这样的结构时，浏览器会将其解析为无效HTML。在某些情况下，浏览器可能会将内部的form元素提升到table外部，或者将div及其内容移出tbody，从而导致表单内的输入字段实际上脱离了form的控制范围。当表单提交时，只有那些真正位于form标签内部的input、textarea等字段才会被收集并发送。

正确的HTML表单与表格结构

为了确保动态添加的输入字段能够被正确提交，核心在于遵循HTML规范，构建有效的表单和表格结构。正确的嵌套关系应是form元素包裹table元素，或者table元素作为form元素的子元素。

以下是推荐的HTML结构范例：

<!-- 方式一：form 元素包裹整个 table -->
<form name="count_form" action="your_submission_url" method="post" enctype="multipart/form-data">
    <table>
        <thead>
            <tr>
                <th>Sku</th>
                <th>Description</th>
                <th>Order</th>
            </tr>
        </thead>
        <tbody id="material-rows">
            <!-- 初始行，或通过 PHP 渲染的行 -->
            <tr>
                <td><input type="text" name="sku[]" class="form-control" /></td>
                <td><input type="text" name="description[]" class="form-control" /></td>
                <td><input type="number" name="order[]" class="form-control" /></td>
            </tr>
        </tbody>
    </table>
    <div class="form-actions">
        <button type="button" id="add-row" class="btn btn-secondary">添加行</button>
        <button type="submit" class="btn btn-primary">提交</button>
    </div>
</form>

<!-- 方式二：table 元素作为 form 的子元素，与其它表单元素并列 -->
<form name="count_form" action="your_submission_url" method="post" enctype="multipart/form-data">
    <!-- 其他表单元素 -->
    <p>一些其他表单信息</p>

    <table>
        <thead>
            <tr>
                <th>Sku</th>
                <th>Description</th>
                <th>Order</th>
            </tr>
        </thead>
        <tbody id="material-rows">
            <!-- 初始行，或通过 PHP 渲染的行 -->
            <tr>
                <td><input type="text" name="sku[]" class="form-control" /></td>
                <td><input type="text" name="description[]" class="form-control" /></td>
                <td><input type="number" name="order[]" class="form-control" /></td>
            </tr>
        </tbody>
    </table>

    <div class="form-actions">
        <button type="button" id="add-row" class="btn btn-secondary">添加行</button>
        <button type="submit" class="btn btn-primary">提交</button>
    </div>
</form>

在上述结构中，form元素完全包含了table元素及其内部的所有输入字段。这样，无论这些字段是初始加载的还是通过J*aScript动态添加的，只要它们被插入到tbody内部，就会被视为该表单的一部分。

Perplexity

Perplexity是一个ChatGPT和谷歌结合的超级工具，可以让你在浏览互联网时提出问题或获得即时摘要

302 查看详情

修正后的表单和J*aScript代码示例

根据上述正确结构原则，我们可以对原始代码进行如下修正。首先，调整HTML以确保form元素正确包裹table：

<!-- 修正后的 HTML 结构 -->
<?php
    // 假设 $warehouse['warehouse_name'] 和 form_open_multipart 函数已定义
    $attributes = array('name' => 'count_form');
    echo form_open_multipart('request/C_request/new_material_request?wh=' .  strtolower($warehouse['warehouse_name']) , $attributes);
?>
<table class="material-form">
    <thead>
        <tr style="display: flex; flex-flow: row wrap; justify-content: space-around;">
            <th>Sku</th>
            <th>Description</th>
            <th>Order</th>
        </tr>
    </thead>
    <tbody id="material-rows" style="display: flex; flex-flow: column wrap;">
        <!-- 初始行 -->
        <tr class="material-row">
            <td><input type="text" id="sku_1" name="sku[]" onblur="sumFunction()" style="font-size: 30px; background-color: #DCDCDC; height: 80%; margin-right: 15px" class="col-md-4" ></td>
            <td><input type="text" id="description_1" name="description[]" onblur="sumFunction()" style="font-size: 30px; background-color: #DCDCDC; height: 80%; margin-right: 15px" class="col-md-4" ></td>
            <td><input type="number" id="order_1" name="order[]" onblur="sumFunction()" style="font-size: 30px; background-color: #DCDCDC; height: 80%; margin-right: 15px" class="col-md-4" ></td>
        </tr>
    </tbody>
</table>
<div id="add-row-container" style="margin-top: 15px;">
    <button type="button" id="add-row-button" class="btn btn-info">添加行</button>
    <p id="counter" style="display: inline-block; margin-left: 10px;"></p>
</div>
<button type="submit" class="btn btn-primary btn-lg" id="accept-count" style="margin-top: 20px;">提交</button>
<?php echo form_close(); ?>

注意事项：

• 将form_open_multipart放在标签的外部，确保整个表格内容都在表单的管辖范围内。
  id="rows"被修改为class="material-row"，因为ID应该是唯一的。为了动态添加行，我们通常会给tbody一个ID（如material-rows），然后向其追加新的
  。
  type="textarea"通常用于多行文本输入，对于单行输入应使用type="text"或type="number"等。
  输入字段的name属性使用数组形式（如name="sku[]"），这样在后端PHP中可以通过数组接收多个值。
  为每个输入字段提供唯一的ID（如id="sku_1"），尤其是在动态添加时，避免ID重复。

  接下来，修正J*aScript代码，使其能够正确地向tbody添加新的

  元素，包含所需的元素（包含多个元素追加到中，而不是将中，以保持表格结构的有效性。

  通过以上修正和最佳实践，可以有效解决动态添加行表单数据无法提交的问题，确保用户输入数据的完整性和正确性。

  和input字段： jQuery(document).ready(function ($) { let rowCount = 1; // 用于生成唯一ID和计数 $('#add-row-button').click(function() { rowCount++; const newRowHtml = ` <tr class="material-row"> <td><input type="text" id="sku_${rowCount}" name="sku[]" onblur="sumFunction()" style="font-size: 30px; background-color: #DCDCDC; height: 80%; margin-right: 15px" class="col-md-4" ></td> <td><input type="text" id="description_${rowCount}" name="description[]" onblur="sumFunction()" style="font-size: 30px; background-color: #DCDCDC; height: 80%; margin-right: 15px" class="col-md-4" ></td> <td><input type="number" id="order_${rowCount}" name="order[]" onblur="sumFunction()" style="font-size: 30px; background-color: #DCDCDC; height: 80%; margin-right: 15px" class="col-md-4" ></td> </tr> `; $('#material-rows').append(newRowHtml); // 将新行追加到 tbody $('#counter').text(`当前行数: ${rowCount}`); // 更新行数显示 }); // 提交按钮现在直接触发表单提交，因为它是 type="submit" // 如果按钮是 type="button" 且需要通过 JS 提交，可以保留以下代码 // $('#accept-count').click(function () { // document.count_form.submit(); // }); }); J*aScript修改说明： #add-row（原始的div）被替换为#add-row-button，更符合语义。 每次添加行时，rowCount递增，用于生成唯一的id，这对于J*aScript操作和辅助技术（如屏幕阅读器）非常重要。 $('#material-rows').append(newRowHtml); 将一个完整的

  和input）追加到tbody中，确保了HTML结构的有效性。 提交按钮的type属性设置为submit，可以直接触发表单提交，无需额外的J*aScript事件监听来调用document.count_form.submit()，除非有特殊逻辑需求。 总结与最佳实践 动态添加行并确保其数据能够成功提交，关键在于以下几点： 严格遵循HTML规范： 确保form元素正确包裹所有表单控件，特别是当与table元素结合使用时。避免form或div作为table、tbody、tr的直接子元素。 验证HTML结构： 利用浏览器开发者工具检查DOM结构，确认动态添加的元素确实位于form标签内部。可以使用W3C HTML验证器来检查代码的规范性。 使用数组命名输入字段： 对于动态添加的重复输入字段，使用name="fieldName[]"的命名约定，后端语言（如PHP）可以轻松地将这些数据作为数组接收。 为动态元素生成唯一ID： 如果需要通过J*aScript操作或引用动态生成的输入字段，确保为它们分配唯一的id属性。 明确J*aScript的追加目标： 当动态添加行时，应将完整的

  直接追加到

以上就是HTML结构与动态表单行提交：确保数据完整性的详细内容，更多请关注php中文网其它相关文章！

# php  # javascript  # java  # jquery  # html  # js  # 浏览器  # app  # 工具  # 后端  # ai  # html表单  # 数  # 表单  # 多个  # 行数  # 并与  # 会将  # 不正确  # 一键  # 键值  # 移除  # 石阡县营销推广报价表格  # seo网络排名优化  # 零基础网站建设课程  # 大朗渠道营销推广  # 济南seo网页  # 南宁给网站做推广  # 常德网站建设咨询公司  # 网站seo选择火27星  # 三门峡智能营销推广  # 贵港网站建设服务商