将动态HTML表格数据提交至PHP服务器的实用指南

<form action="test.php" method="post">
    <table id="dynamicTable">
        <thead>
            <tr>
                <th>商品名称</th>
                <th>数量</th>
                <th>单价</th>
            </tr>
        </thead>
        <tbody>
            <!-- 假设这些行和输入字段是由JavaScript动态添加的 -->
            <tr>
                <td><input type="text" name="items[0][name]" value="笔记本电脑"></td>
                <td><input type="text" name="items[0][quantity]" value="1"></td>
                <td><input type="text" name="items[0][price]" value="5000"></td>
            </tr>
            <tr>
                <td><input type="text" name="items[1][name]" value="鼠标"></td>
                <td><input type="text" name="items[1][quantity]" value="2"></td>
                <td><input type="text" name="items[1][price]" value="100"></td>
            </tr>
            <!-- 更多动态添加的行... -->
        </tbody>
    </table>

    <input type="button" id="addBtn" value="添加新行">
    <input type="button" id="deleteBtn" value="删除选中行">
    <input type="submit" id="saveBtn" value="保存数据">
</form>

// 当点击“添加新行”按钮时
document.getElementById('addBtn').addEventListener('click', function() {
    var tableBody = document.querySelector('#dynamicTable tbody');
    var newRowIndex = tableBody.children.length; // 获取当前行数作为新行的索引

    var newRow = document.createElement('tr');
    newRow.innerHTML = `
        <td><input type="text" name="items[${newRowIndex}][name]" value=""></td>
        <td><input type="text" name="items[${newRowIndex}][quantity]" value=""></td>
        <td><input type="text" name="items[${newRowIndex}][price]" value=""></td>
    `;
    tableBody.appendChild(newRow);
});

// 注意：实际应用中，还需要处理删除行、编辑现有行数据等逻辑，确保input的name和value始终与表格显示内容同步。

<?php
// test.php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    echo "<h1>接收到的表格数据：</h1>";

    // 使用 var_dump 查看原始数据结构
    echo "<pre>";
    var_dump($_POST);
    echo "</pre>";

    // 检查并处理 'items' 数据
    if (isset($_POST['items']) && is_array($_POST['items'])) {
        echo "<h2>处理后的数据示例：</h2>";
        echo "<ul>";
        foreach ($_POST['items'] as $index => $itemData) {
            // $itemData 将是一个关联数组，包含 'name', 'quantity', 'price'
            $itemName = htmlspecialchars($itemData['name'] ?? 'N/A');
            $itemQuantity = htmlspecialchars($itemData['quantity'] ?? 'N/A');
            $itemPrice = htmlspecialchars($itemData['price'] ?? 'N/A');

            echo "<li>商品 " . ($index + 1) . ": 名称='{$itemName}', 数量='{$itemQuantity}', 单价='{$itemPrice}'</li>";

            // 在这里，你可以将数据保存到文件、数据库或其他存储介质
            // 例如，保存到文本文件：
            // $dataToSave = "名称: {$itemName}, 数量: {$itemQuantity}, 单价: {$itemPrice}\n";
            // file_put_contents('table_data.txt', $dataToSave, FILE_APPEND);
        }
        echo "</ul>";
    } else {
        echo "<p>未接收到任何商品数据。</p>";
    }
} else {
    echo "<p>请通过POST请求提交数据。</p>";
}
?>

array(1) {
  ["items"]=>
  array(2) {
    [0]=>
    array(3) {
      ["name"]=> string(12) "笔记本电脑"
      ["quantity"]=> string(1) "1"
      ["price"]=> string(4) "5000"
    }
    [1]=>
    array(3) {
      ["name"]=> string(6) "鼠标"
      ["quantity"]=> string(1) "2"
      ["price"]=> string(3) "100"
    }
  }
}