基于PHP与MySQL实现可动态添加PC信息的表单开发求助

首先得指出你现有思路里的核心问题：用单表字段存储多台电脑信息是不可扩展的，而且后端动态修改表结构的做法非常危险且低效。我们应该采用一对多的数据库设计，配合前端动态字段添加、后端批量处理的方案来实现需求。

第一步：修正数据库设计 #

创建两张关联表，分离用户基础信息和电脑信息，这样能轻松支持多台电脑的存储：

-- 用户表（保留原有基础信息）
CREATE TABLE users (
    id INT PRIMARY KEY AUTO_INCREMENT,
    firstname VARCHAR(255) NOT NULL
    -- 可添加其他用户基础字段，如邮箱、部门等
);

-- 电脑表（与用户表通过user_id关联）
CREATE TABLE computers (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT NOT NULL,
    pc_model VARCHAR(255) NOT NULL,
    pc_serial VARCHAR(255) NOT NULL,
    software TEXT, -- 可存多个软件，用逗号分隔或JSON格式
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);

第二步：前端实现动态添加表单字段 #

修改edit.php，用JavaScript实现点击“添加更多”按钮动态新增电脑字段组，字段采用数组命名（如pc_model[]），方便后端批量处理：

<form action="add.php?id=<?php echo $row['id']; ?>" method="post">
    <input type="hidden" name="id" value="<?php echo $row['id']; ?>">
    
    <!-- 用户基础信息 -->
    <div style="margin:10px 0;">
        <label>姓名：</label>
        <input type="text" name="firstname" value="<?php echo htmlspecialchars($row['firstname']); ?>" required>
    </div>

    <!-- 电脑信息容器 -->
    <div id="computers-container">
        <?php
        // 加载用户已有的电脑信息
        $user_id = $row['id'];
        $comp_query = "SELECT * FROM computers WHERE user_id = $user_id";
        $comp_result = mysqli_query($db, $comp_query);
        $has_computers = mysqli_num_rows($comp_result) > 0;

        // 渲染已有电脑或默认空字段组
        if ($has_computers) {
            while ($comp_row = mysqli_fetch_assoc($comp_result)) {
        ?>
        <div class="computer-group" style="margin:15px 0; padding:10px; border:1px solid #eee;">
            <label>电脑型号：</label>
            <input type="text" name="pc_model[]" value="<?php echo htmlspecialchars($comp_row['pc_model']); ?>" required>
            <label>电脑序列号：</label>
            <input type="text" name="pc_serial[]" value="<?php echo htmlspecialchars($comp_row['pc_serial']); ?>" required>
            <label>软件：</label>
            <input type="text" name="software[]" value="<?php echo htmlspecialchars($comp_row['software']); ?>">
            <button type="button" class="remove-btn" style="margin-left:10px;">删除</button>
        </div>
        <?php
            }
        } else {
        ?>
        <div class="computer-group" style="margin:15px 0; padding:10px; border:1px solid #eee;">
            <label>电脑型号：</label>
            <input type="text" name="pc_model[]" required>
            <label>电脑序列号：</label>
            <input type="text" name="pc_serial[]" required>
            <label>软件：</label>
            <input type="text" name="software[]">
            <button type="button" class="remove-btn" style="margin-left:10px;">删除</button>
        </div>
        <?php } ?>
    </div>

    <!-- 添加更多按钮 -->
    <button type="button" id="add-more-btn" style="margin:10px 0;">添加更多电脑</button>
    <input type="submit" name="update" value="保存更新">
</form>

<script>
// 动态添加电脑字段组
document.getElementById('add-more-btn').addEventListener('click', function() {
    const container = document.getElementById('computers-container');
    const newGroup = document.createElement('div');
    newGroup.className = 'computer-group';
    newGroup.style = "margin:15px 0; padding:10px; border:1px solid #eee;";
    newGroup.innerHTML = `
        <label>电脑型号：</label>
        <input type="text" name="pc_model[]" required>
        <label>电脑序列号：</label>
        <input type="text" name="pc_serial[]" required>
        <label>软件：</label>
        <input type="text" name="software[]">
        <button type="button" class="remove-btn" style="margin-left:10px;">删除</button>
    `;
    container.appendChild(newGroup);

    // 绑定删除按钮事件
    bindRemoveBtn(newGroup.querySelector('.remove-btn'));
});

// 为已有删除按钮绑定事件
document.querySelectorAll('.remove-btn').forEach(btn => bindRemoveBtn(btn));

// 封装删除按钮逻辑
function bindRemoveBtn(btn) {
    btn.addEventListener('click', function() {
        const container = document.getElementById('computers-container');
        if (container.children.length > 1) {
            this.parentElement.remove();
        } else {
            alert('至少需要填写一台电脑信息');
        }
    });
}
</script>

第三步：后端批量处理表单数据 #

修改add.php，先更新用户基础信息，再清理用户原有电脑记录，最后批量插入新的电脑信息（兼顾修改、新增、删除场景）：

<?php
// 假设已完成数据库连接$db
if(isset($_POST['update'])) {
    $id = $_POST['id'];
    $firstname = $_POST['firstname'];
    $pc_models = $_POST['pc_model'];
    $pc_serials = $_POST['pc_serial'];
    $softwares = $_POST['software'];

    // 1. 更新用户基础信息（用预处理语句防SQL注入）
    $update_user = $db->prepare("UPDATE users SET firstname = ? WHERE id = ?");
    $update_user->bind_param("si", $firstname, $id);
    $update_user->execute();
    $update_user->close();

    // 2. 删除用户原有所有电脑记录
    $delete_comp = $db->prepare("DELETE FROM computers WHERE user_id = ?");
    $delete_comp->bind_param("i", $id);
    $delete_comp->execute();
    $delete_comp->close();

    // 3. 批量插入新的电脑信息
    $insert_comp = $db->prepare("INSERT INTO computers (user_id, pc_model, pc_serial, software) VALUES (?, ?, ?, ?)");
    foreach ($pc_models as $index => $model) {
        $serial = $pc_serials[$index];
        $software = isset($softwares[$index]) ? $softwares[$index] : '';
        // 跳过空的型号和序列号
        if (!empty($model) && !empty($serial)) {
            $insert_comp->bind_param("isss", $id, $model, $serial, $software);
            $insert_comp->execute();
        }
    }
    $insert_comp->close();

    // 跳转到列表页
    header('location:index.php');
    exit;
}

第四步：视图页面展示所有电脑信息 #

修改index.php，通过关联查询分组展示用户的所有电脑信息：

<?php
// 关联查询用户和电脑信息
$sel_query="SELECT u.id, u.firstname, c.pc_model, c.pc_serial, c.software 
            FROM users u 
            LEFT JOIN computers c ON u.id = c.user_id 
            ORDER BY u.id desc;";
$result = mysqli_query($db,$sel_query);

// 用数组分组用户的电脑信息
$users = [];
while($row = mysqli_fetch_assoc($result)) {
    $user_id = $row['id'];
    if (!isset($users[$user_id])) {
        $users[$user_id] = [
            'id' => $row['id'],
            'firstname' => $row['firstname'],
            'computers' => []
        ];
    }
    if (!empty($row['pc_model'])) {
        $users[$user_id]['computers'][] = [
            'model' => $row['pc_model'],
            'serial' => $row['pc_serial'],
            'software' => $row['software']
        ];
    }
}
?>

<table border="1" cellpadding="8" cellspacing="0">
    <tr>
        <th>用户ID</th>
        <th>姓名</th>
        <th>电脑信息</th>
    </tr>
    <?php foreach ($users as $user): ?>
    <tr>
        <td align="center"><?php echo $user['id']; ?></td>
        <td align="center"><?php echo htmlspecialchars($user['firstname']); ?></td>
        <td>
            <?php if (empty($user['computers'])): ?>
                暂无电脑信息
            <?php else: ?>
                <ul style="margin:0; padding-left:20px;">
                    <?php foreach ($user['computers'] as $comp): ?>
                    <li>
                        型号：<?php echo htmlspecialchars($comp['model']); ?> | 
                        序列号：<?php echo htmlspecialchars($comp['serial']); ?> | 
                        软件：<?php echo htmlspecialchars($comp['software'] ?: '无'); ?>
                    </li>
                    <?php endforeach; ?>
                </ul>
            <?php endif; ?>
        </td>
    </tr>
    <?php endforeach; ?>
</table>

方案优势说明 #

1. 可扩展性强：一对多的数据库设计支持用户添加任意多台电脑，无需修改表结构
2. 数据结构规范：用户与电脑信息分离，符合数据库设计的规范化原则
3. 交互体验友好：前端支持动态添加/删除字段，操作流畅
4. 安全性更高：采用预处理语句彻底避免SQL注入风险
5. 逻辑简洁高效：后端批量处理数据，规避了原有代码中动态修改表结构的错误做法

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