如何将HTML表格数据封装为字典后存入PHP的$_POST变量

静态HTML表格的单元格内容不会被表单自动提交，你需要通过JavaScript在表单提交前提取表格数据，生成符合PHP数组命名规则的隐藏表单字段，提交后即可在$_POST中拿到要求的结构。

1. 前端完整代码（含JS处理逻辑） #

<form action="/page.php" method="post" id="dataForm">
    <table id="tbl">
        <tr>
            <th>Item Code</th>
            <th>Item</th>
            <th>Rate</th>
        </tr>
        <tr>
            <td>5642</td>
            <td>Paracetamol</td>
            <td>10.00</td>
        </tr>
        <tr>
            <td>7849</td>
            <td>Crocin</td>
            <td>45.00</td>
        </tr>
        <tr>
            <td>6418</td>
            <td>Condom</td>
            <td>12.00</td>
        </tr>
        <tr>
            <td>4572</td>
            <td>Vitamin D</td>
            <td>5.00</td>
        </tr>
    </table>
    <button type="submit">提交数据</button>
</form>

<script>
const form = document.getElementById('dataForm');
form.addEventListener('submit', function(e) {
    // 先清除之前生成的隐藏字段，避免重复提交
    const oldInputs = form.querySelectorAll('input[name^="table_data"]');
    oldInputs.forEach(input => input.remove());

    const table = document.getElementById('tbl');
    // 提取表头作为数组键
    const headers = Array.from(table.querySelectorAll('th')).map(th => th.textContent.trim());
    // 提取所有数据行
    const rows = Array.from(table.querySelectorAll('tr')).slice(1); // 跳过表头行

    rows.forEach(row => {
        const cells = Array.from(row.querySelectorAll('td'));
        cells.forEach((cell, index) => {
            const input = document.createElement('input');
            input.type = 'hidden';
            // 命名符合PHP数组规则，提交后自动转为关联数组
            input.name = `table_data[${headers[index]}][]`;
            input.value = cell.textContent.trim();
            form.appendChild(input);
        });
    });
});
</script>

2. 后端PHP接收逻辑 #

提交到/page.php后，直接通过$_POST['table_data']即可拿到你要求的字典结构，示例验证代码：

<?php
// 接收表格数据
$tableData = $_POST['table_data'] ?? [];
// 打印查看结构
var_dump($tableData);
?>

输出结果完全符合要求：

键为列标题，每个键对应的值为该列按行排列的所有表格数据列表
示例输出结构：

array(3) {
  ["Item Code"]=>
  array(4) {
    [0]=> string(4) "5642"
    [1]=> string(4) "7849"
    [2]=> string(4) "6418"
    [3]=> string(4) "4572"
  }
  ["Item"]=>
  array(4) {
    [0]=> string(10) "Paracetamol"
    [1]=> string(6) "Crocin"
    [2]=> string(6) "Condom"
    [3]=> string(9) "Vitamin D"
  }
  ["Rate"]=>
  array(4) {
    [0]=> string(5) "10.00"
    [1]=> string(5) "45.00"
    [2]=> string(5) "12.00"
    [3]=> string(4) "5.00"
  }
}

提示：后端接收数据后建议做合法性校验，避免非法内容存入业务系统。

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