如何将JS动态生成的表格行输入值批量存入MySQL？

第一步：修改JS中input的name属性为数组格式 #

把原来的pds_4_input_1类命名改成数组结构，让PHP能直接接收整组数据。每一行的三个input对应数组的一个子元素，命名格式如下：

function addRow() {
  const table = document.getElementById('data-table');
  const newRow = table.insertRow();

  // 第一个输入框
  const cell1 = newRow.insertCell();
  const input1 = document.createElement('input');
  input1.type = 'text';
  input1.name = 'pds_data[][col1]'; // 数组格式命名
  cell1.appendChild(input1);

  // 第二个输入框
  const cell2 = newRow.insertCell();
  const input2 = document.createElement('input');
  input2.type = 'text';
  input2.name = 'pds_data[][col2]';
  cell2.appendChild(input2);

  // 第三个输入框
  const cell3 = newRow.insertCell();
  const input3 = document.createElement('input');
  input3.type = 'text';
  input3.name = 'pds_data[][col3]';
  cell3.appendChild(input3);
}

注意：初始的3个input也要改成同样的数组格式，保证前后数据结构统一。

第二步：PHP端批量处理并插入数据库 #

使用PDO预处理语句批量插入，既高效又能防止SQL注入。假设你的数据库表有col1、col2、col3三个字段对应三个输入框的值：

<?php
// 初始化PDO连接
$dsn = 'mysql:host=localhost;dbname=your_database;charset=utf8mb4';
$username = 'your_username';
$password = 'your_password';

try {
  $pdo = new PDO($dsn, $username, $password);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  // 处理POST请求
  if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['pds_data'])) {
    $rows = $_POST['pds_data'];
    
    // 预处理插入语句
    $stmt = $pdo->prepare("INSERT INTO your_table (col1, col2, col3) VALUES (:col1, :col2, :col3)");

    // 循环处理每一行数据
    foreach ($rows as $row) {
      // 跳过全空的行（可选，根据业务需求调整）
      if (trim($row['col1']) === '' && trim($row['col2']) === '' && trim($row['col3']) === '') {
        continue;
      }

      // 绑定参数并执行插入
      $stmt->execute([
        ':col1' => $row['col1'],
        ':col2' => $row['col2'],
        ':col3' => $row['col3']
      ]);
    }

    echo "所有数据已成功插入";
  }
} catch (PDOException $e) {
  die("数据库错误: " . $e->getMessage());
}
?>

关键说明 #

• 数组格式的name属性会让PHP自动将所有行的数据整理成二维数组$_POST['pds_data']，无需手动遍历零散的键名。
• 预处理语句必须使用，避免直接拼接SQL导致的注入风险。
• 可以根据实际需求添加数据校验（比如必填项检查、格式验证），在插入前过滤无效数据。

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