在处理包含动态添加行的表单时，若提交后新增数据缺失，通常源于不正确的HTML结构。本文将深入探讨`form`、`table`及相关元素的正确嵌套方式，强调HTML语义对表单提交行为的关键影响。通过修正无效的结构，并结合JavaScript动态添加行，确保所有用户输入，包括动态生成的部分，都能被成功捕获并提交。
当用户在网页表单中动态添加行（例如，通过点击“添加行”按钮增加输入字段），但提交表单后这些新增行的数据却未能包含在请求中时，这通常不是JavaScript代码本身的问题，而是底层HTML结构存在缺陷。浏览器在解析HTML文档时，会尝试修正任何无效的或不符合规范的结构。这种自动修正行为可能导致DOM树与开发者预期不符，特别是当form元素与table元素不正确嵌套时。
具体来说，HTML规范严格定义了元素的父子关系。form元素不能直接作为table、tbody或tr的子元素。同样，div元素也不应直接作为table、tbody或tr的子元素。当出现如zuojiankuohaophpcntable><form>...</form></table>或<tbody><div/>...</div>这样的结构时，浏览器会将其解析为无效HTML。在某些情况下，浏览器可能会将内部的form元素提升到table外部，或者将div及其内容移出tbody，从而导致表单内的输入字段实际上脱离了form的控制范围。当表单提交时，只有那些真正位于form标签内部的input、textarea等字段才会被收集并发送。
为了确保动态添加的输入字段能够被正确提交，核心在于遵循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元素及其内部的所有输入字段。这样，无论这些字段是初始加载的还是通过JavaScript动态添加的，只要它们被插入到tbody内部，就会被视为该表单的一部分。
根据上述正确结构原则，我们可以对原始代码进行如下修正。首先，调整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(); ?>注意事项：
接下来，修正JavaScript代码，使其能够正确地向tbody添加新的<tr>元素，包含所需的<td>和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();
// });
});JavaScript修改说明：
动态添加行并确保其数据能够成功提交，关键在于以下几点：
通过以上修正和最佳实践，可以有效解决动态添加行表单数据无法提交的问题，确保用户输入数据的完整性和正确性。
以上就是HTML结构与动态表单行提交：确保数据完整性的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
552
收藏
