如何用PHP实现表单多次提交新增HTML表格行且不覆盖

解决方案 #

方案一：PHP Session 存储临时数据（服务器端存储，会话内有效） #

利用Session存储每次提交的表单数据，遍历Session数组渲染所有行，删除操作仅移除Session内的数据，不影响数据库。

1. 初始化Session并处理删除请求
   在页面最顶部添加以下代码：

<?php
session_start();
// 初始化存储行数据的Session数组
if(!isset($_SESSION['work_rows'])) {
    $_SESSION['work_rows'] = [];
}
// 处理删除请求
if(isset($_GET['delete']) && is_numeric($_GET['delete'])) {
    $delete_index = (int)$_GET['delete'];
    if(isset($_SESSION['work_rows'][$delete_index])) {
        array_splice($_SESSION['work_rows'], $delete_index, 1);
        // 重定向避免刷新重复删除
        header("Location: " . htmlspecialchars($_SERVER["PHP_SELF"]));
        exit;
    }
}
?>

2. 修改表单提交逻辑
   在表单提交处理代码中，将验证后的表单数据添加到Session数组：

<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
    // 这里假设已完成表单验证，获取到$customer, $siteCode等变量
    $new_row = [
        'customer' => $customer,
        'siteCode' => $siteCode,
        'urgency' => $urgency,
        'outage' => $outage,
        'date' => $date,
        'requestedBy' => $requestedBy,
        'comments' => $comments
    ];
    $_SESSION['work_rows'][] = $new_row;
}
?>

3. 修改表格渲染逻辑
   遍历Session数组输出所有行，并添加删除按钮：

<section class="tables mt-5 container-fluid">
    <div class="row">
        <div class="col-12">
            <table class="tbaytel-table">
                <caption>TBayTel</caption>
                <tr>
                    <th>Site Code / Name</th>
                    <th>Urgency</th>
                    <th>Outage Descrption</th>
                    <th>Date Requested</th>
                    <th>Aging in days</th>  
                    <th>Requested By</th>
                    <th>Comments</th> 
                    <th>Status</th>
                    <th>操作</th>
                </tr>
                <?php
                foreach($_SESSION['work_rows'] as $index => $row) {
                    if($row['customer'] === 'TBayTel'){
                        echo "
                        <tr>
                             <td>{$row['siteCode']}</td> 
                             <td>{$row['urgency']}</td>
                             <td>{$row['outage']}</td> 
                             <td>{$row['date']}</td>
                             <td></td>
                             <td>{$row['requestedBy']}</td>
                             <td>{$row['comments']}</td>
                             <td></td>
                             <td><a href='?delete={$index}' onclick='return confirm(\"确定删除此行？\")'>删除</a></td>
                        </tr>
                        ";
                    }
                };
                ?>
            </table>
        </div>
    </div>
</section>

方案二：纯前端JavaScript处理（浏览器本地存储，无页面刷新） #

通过JavaScript阻止表单默认刷新，直接在前端新增行，用localStorage保存数据，页面刷新后可恢复，删除操作仅在前端生效。

1. 修改表单添加ID

<form class="addWork" id="addWorkForm" method="post">
    <!-- 原有表单内容不变 -->
</form>

2. 添加JavaScript代码

// 表单提交处理
document.getElementById('addWorkForm').addEventListener('submit', function(e) {
    e.preventDefault();
    // 获取表单字段值（需根据实际表单字段完善）
    const customer = document.querySelector('input[name="addCustomer"]').value.trim();
    const siteCode = document.querySelector('input[name="addSite"]').value.trim();
    const urgency = document.querySelector('input[name="addUrgency"]').value.trim();
    const outage = document.querySelector('input[name="addOutage"]').value.trim();
    const date = document.querySelector('input[name="addDate"]').value.trim();
    const requestedBy = document.querySelector('input[name="addRequestedBy"]').value.trim();
    const comments = document.querySelector('input[name="addComments"]').value.trim();
    
    // 简单验证
    if(!customer || !siteCode) {
        alert('请填写必填字段');
        return;
    }
    
    // 创建新行
    const table = document.querySelector('.tbaytel-table');
    const newRow = document.createElement('tr');
    newRow.innerHTML = `
        <td>${siteCode}</td>
        <td>${urgency}</td>
        <td>${outage}</td>
        <td>${date}</td>
        <td></td>
        <td>${requestedBy}</td>
        <td>${comments}</td>
        <td></td>
        <td><button class="delete-row">删除</button></td>
    `;
    
    // 仅TBayTel客户的行添加到表格
    if(customer === 'TBayTel') {
        table.appendChild(newRow);
    }
    
    // 清空表单
    this.reset();
    
    // 绑定删除事件
    newRow.querySelector('.delete-row').addEventListener('click', function() {
        if(confirm('确定删除此行？')) {
            newRow.remove();
            // 更新localStorage
            let workRows = JSON.parse(localStorage.getItem('workRows')) || [];
            workRows = workRows.filter(row => 
                row.siteCode !== siteCode || row.date !== date // 用唯一标识筛选，可根据实际调整
            );
            localStorage.setItem('workRows', JSON.stringify(workRows));
        }
    });
    
    // 保存到localStorage
    let workRows = JSON.parse(localStorage.getItem('workRows')) || [];
    workRows.push({customer, siteCode, urgency, outage, date, requestedBy, comments});
    localStorage.setItem('workRows', JSON.stringify(workRows));
});

// 页面加载时恢复数据
window.addEventListener('load', function() {
    const workRows = JSON.parse(localStorage.getItem('workRows')) || [];
    const table = document.querySelector('.tbaytel-table');
    workRows.forEach(row => {
        if(row.customer === 'TBayTel') {
            const newRow = document.createElement('tr');
            newRow.innerHTML = `
                <td>${row.siteCode}</td>
                <td>${row.urgency}</td>
                <td>${row.outage}</td>
                <td>${row.date}</td>
                <td></td>
                <td>${row.requestedBy}</td>
                <td>${row.comments}</td>
                <td></td>
                <td><button class="delete-row">删除</button></td>
            `;
            table.appendChild(newRow);
            // 绑定删除事件
            newRow.querySelector('.delete-row').addEventListener('click', function() {
                if(confirm('确定删除此行？')) {
                    newRow.remove();
                    const updatedRows = workRows.filter(r => r !== row);
                    localStorage.setItem('workRows', JSON.stringify(updatedRows));
                }
            });
        }
    });
});

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