动态表格表单数据批量存入MySQL的实现方案咨询

我来帮你搞定这个动态表单存数据库的问题，主要分前端表单调整和后端逻辑重构两部分，还会修复一些潜在的安全和兼容性问题：

一、前端修改：处理动态行的name数组（解决重复id/name问题） #

首先，动态生成的表单元素不能用重复的id（因为id是全局唯一的），而且要让后端能接收多行数据，需要把表单控件的name改成数组格式（比如name="item[]"），这样提交后后端会拿到一个包含所有行数据的数组。

修改后的input.php代码： #

<form action="insert.php" method="post">
<div class="box-body no-padding">
<table class="table table-bordered">
<tr>
<th>Item</th>
<th>#</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
<th></th>
</tr>
<tr>
<td><input type="text" name="item[]" class="item"></td>
<td><input type="text" name="no[]" class="no" disabled></td>
<td><input type="number" name="qty[]" class="qty"></td>
<td><input type="number" name="price[]" class="price"></td>
<td><input type="number" name="total[]" class="total" disabled></td>
<td><button type="button" class="remove-row"><i class="fa fa-trash"></i></button></td>
</tr>
</table>
</div>
<div class="box-body">
<div class="button-group">
<a href="javascript:void(0)" class="add-row"><i class="fa fa-plus-circle"></i> Add Item</a>
</div>
</div>
<div class="box-footer">
<div class="button-group pull-right">
<button type="button" class="btn btn-default">Cancel</button> <!-- 这里把type改成button，避免触发提交 -->
<button type="submit" class="btn btn-primary" name="submit">Save</button> <!-- 加name="submit"让后端判断 -->
</div>
</div>
</form>

修改后的JS代码（支持数组name+自动编号）： #

<script type="text/javascript">
$(document).ready(function(){
    // 自动生成编号的函数
    function updateRowNumbers() {
        $(".table tr").each(function(index) {
            if(index > 0) { // 跳过表头行
                $(this).find(".no").val(index);
            }
        });
    }

    // 初始化编号
    updateRowNumbers();

    $(".add-row").on('click', function(){
        var item = "<td><input type='text' name='item[]' class='item'></td>";
        var no = "<td><input type='text' name='no[]' class='no' disabled></td>";
        var qty = "<td><input type='number' name='qty[]' class='qty'></td>";
        var price = "<td><input type='number' name='price[]' class='price'></td>";
        var total = "<td><input type='number' name='total[]' class='total' disabled></td>";
        var remove_button ="<td><button type='button' class='remove-row'><i class='fa fa-trash'></i></button></td>";
        var markup = "<tr>" + item + no + qty + price + total + remove_button + "</tr>";
        $("table").append(markup);
        // 新增行后更新编号
        updateRowNumbers();
    });

    $(".table").on('click', '.remove-row', function(){
        $(this).closest("tr").remove();
        // 删除行后更新编号
        updateRowNumbers();
    });

    // 可选：自动计算Total（qty * price）
    $(document).on('input', '.qty, .price', function(){
        var row = $(this).closest("tr");
        var qty = parseFloat(row.find(".qty").val()) || 0;
        var price = parseFloat(row.find(".price").val()) || 0;
        row.find(".total").val(qty * price);
    });
});
</script>

二、后端修改：接收数组并批量插入MySQL #

你原来用的mysql_*函数已经被PHP废弃了，非常不安全，我们换成mysqli预处理语句来避免SQL注入，同时处理数组格式的表单数据。

修改后的insert.php代码： #

<?php
// 用mysqli连接数据库（替代废弃的mysql_*）
$connection = mysqli_connect("localhost", "root", "", "db");
if(!$connection) {
    die("数据库连接失败: " . mysqli_connect_error());
}

if(isset($_POST['submit'])){
    // 检查表单数组是否存在
    if(isset($_POST['item'], $_POST['no'], $_POST['qty'], $_POST['price'])){
        $items = $_POST['item'];
        $nos = $_POST['no'];
        $qtys = $_POST['qty'];
        $prices = $_POST['price'];

        // 使用预处理语句，防止SQL注入
        $stmt = mysqli_prepare($connection, "INSERT INTO `table` (item, no, qty, price) VALUES (?, ?, ?, ?)");
        mysqli_stmt_bind_param($stmt, "sidi", $item, $no, $qty, $price); // s=字符串, i=整数, d=小数

        // 循环插入每一行数据
        foreach($items as $index => $item){
            // 跳过空行（可选，根据需求调整）
            if(empty($item) && empty($qtys[$index]) && empty($prices[$index])) continue;
            
            $no = $nos[$index];
            $qty = $qtys[$index] ?? 0;
            $price = $prices[$index] ?? 0;

            mysqli_stmt_execute($stmt);
        }

        mysqli_stmt_close($stmt);
        echo "数据保存成功！";
        // 可以跳转到列表页或者刷新当前页
        // header("Location: input.php");
        // exit;
    }
}

mysqli_close($connection);
?>

关键注意事项 #

1. 表名注意：table是MySQL的关键字，如果你真的用table当表名，需要用反引号`包裹，最好改成其他名称（比如order_items）。
2. 数据验证：上面的代码只是基础功能，实际项目中要加入数据验证（比如检查qty和price是否为有效数字，item是否为空等）。
3. 安全问题：预处理语句一定要用，不能直接把用户输入拼到SQL里，避免SQL注入。
4. 取消按钮：原来的取消按钮type是submit，会触发表单提交，改成button就不会了。

内容的提问来源于stack exchange，提问作者algi