本文详解如何通过数组命名表单字段、动态添加/删除行，并在控制器中批量插入多条记录，避免重复 id 冲突与单条插入性能瓶颈。
本文详解如何通过数组命名表单字段、动态添加/删除行，并在控制器中批量插入多条记录，避免重复 id 冲突与单条插入性能瓶颈。
在 Laravel 开发中，常需一次性提交多条结构相同的表单数据（如采购清单、库存明细等）。若沿用原始写法——为每行使用相同字段名（如 name="item"），后端将无法区分各条记录，导致仅能接收最后一条数据；而若手动拼接 ID（如 item_1, item_2）又会增加解析复杂度。最佳实践是采用 PHP 数组式字段命名（name="inventory[0][item]"），配合前端动态索引管理与后端批量创建逻辑，实现简洁、健壮、可扩展的多行提交方案。
面向 CRM 系统的 MySQL 8 数据库模式设计。当用户需要为客户关系管理（CRM）系统设计、评审、优化或生成数据库模式时，应使用此项技能。
✅ 正确的表单结构（Blade 模板）
推荐使用语义清晰的 <table> 或 <code><div> 布局，并为每行输入框设置带索引的嵌套数组名称：<pre class="brush:php;toolbar:false;"><form action="{{ route('invetory.create') }}" method="POST">
@csrf
<table class="table table-bordered" id="dynamicTable">
<thead>
<tr>
<th>商品名称</th>
<th>税率</th>
<th>进价</th>
<th>售价</th>
<th>总价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="inventory[0][item]" class="form-control" required></td>
<td><input type="number" step="0.01" name="inventory[0][tax]" class="form-control"></td>
<td><input type="number" step="0.01" name="inventory[0][price]" class="form-control"></td>
<td><input type="number" step="0.01" name="inventory[0][selling_price]" class="form-control"></td>
<td><input type="number" step="0.01" name="inventory[0][total_price]" class="form-control"></td>
<td><button type="button" class="btn btn-sm btn-danger remove-row">删除</button></td>
</tr>
</tbody>
</table>
<button type="button" id="addRow" class="btn btn-primary mt-2">+ 添加一行</button>
<button type="submit" class="btn btn-success mt-2">保存全部</button>
</form></pre><h3>? 动态增删行（JavaScript）</h3>
<p>使用 jQuery 简化 DOM 操作，自动维护递增索引，并支持即时删除：</p><pre class="brush:php;toolbar:false;"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
let rowIndex = 0;
$('#addRow').on('click', function() {
rowIndex++;
const newRow = `
<tr>
<td><input type="text" name="inventory[${rowIndex}][item]" class="form-control" required></td>
<td><input type="number" step="0.01" name="inventory[${rowIndex}][tax]" class="form-control"></td>
<td><input type="number" step="0.01" name="inventory[${rowIndex}][price]" class="form-control"></td>
<td><input type="number" step="0.01" name="inventory[${rowIndex}][selling_price]" class="form-control"></td>
<td><input type="number" step="0.01" name="inventory[${rowIndex}][total_price]" class="form-control"></td>
<td><button type="button" class="btn btn-sm btn-danger remove-row">删除</button></td>
</tr>
`;
$('#dynamicTable tbody').append(newRow);
});
$(document).on('click', '.remove-row', function() {
if ($('#dynamicTable tbody tr').length > 1) {
$(this).closest('tr').remove();
} else {
alert('至少保留一行！');
}
});
</script></pre><blockquote>
<p>⚠️ 注意事项： </p>
<ul>
<li>
<strong>不要使用 <code>cloneNode(true) 直接复制含 id 的元素（易引发 DOM ID 冲突及 JS 事件丢失）；
name 属性必须严格遵循 inventory[N][field] 格式，确保 Laravel 能正确解析为二维关联数组； step="0.01" 和 type="number" 提升用户体验与数据一致性。? 后端批量入库（Controller）
在 InventoryController@create 中，遍历请求中的 inventory 数组，逐条调用 Inventory::create()：
use Illuminate\Http\Request;
use App\Models\Inventory;
public function create(Request $request)
{
// 可选：添加批量验证（Laravel 9+ 支持数组验证）
$validated = $request->validate([
'inventory.*.item' => 'required|string|max:255',
'inventory.*.tax' => 'nullable|numeric|min:0|max:100',
'inventory.*.price' => 'required|numeric|min:0',
'inventory.*.selling_price' => 'required|numeric|min:0',
'inventory.*.total_price' => 'required|numeric|min:0',
]);
// 批量创建 —— 每行一个模型实例
foreach ($request->input('inventory', []) as $data) {
Inventory::create($data);
}
return redirect()
->route('inventory.index')
->with('success', '成功添加 ' . count($request->inventory) . ' 条库存记录！');
}? 进阶提示：
- 若数据量极大（>100 行），可改用
Inventory::insert()原生批量插入提升性能（需手动处理时间戳、主键等）； - 为防止空行提交，可在
foreach前用array_filter($data)清理空值； - 路由名建议修正为
inventory.store（符合 RESTful 命名规范），当前invetory.create存在拼写错误，应在web.php中同步更新。
通过以上结构化实现，你将获得一个稳定、可维护、符合 Laravel 最佳实践的多行表单提交解决方案。
