多行表单数据插入数据库的全面指南

php

2024-03-11 03:13:37

多行表单数据插入数据库详解

简介

在许多应用中，我们需要将从多行表单收集的数据插入数据库。本文将深入探讨如何使用 HTML、JavaScript 和后端编程语言实现这一目标。

HTML 表单创建

第一步是创建允许用户输入多行数据的 HTML 表单。使用 table 元素创建表格，每个行代表表单的一行数据。为每个输入字段分配唯一的名称，以便在后端进行数据处理。

JavaScript 动态添加行

为了提高用户体验，我们使用 JavaScript 添加一个按钮，允许用户动态添加新行。这使他们能够根据需要添加任意数量的数据行。

处理表单数据

在后端，我们需要处理表单提交的数据。使用 PHP 或其他编程语言从表单请求中获取输入字段的值。遍历每一行数据，准备 SQL 语句将数据插入数据库表。

示例代码

以下是一个示例代码，演示了多行表单数据插入数据库的整个过程：

HTML

<form action="save_data.php" method="POST">
  <table id="table_data">
    <thead>
      <tr>
        <th>ItemID</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr id="row_0">
        <td><input type="text" name="itemid_0" placeholder="ItemID"></td>
        <td><input type="text" name="amount_0" placeholder="Amount"></td>
      </tr>
      <tr id="row_1">
        <td><input type="text" name="itemid_1" placeholder="ItemID"></td>
        <td><input type="text" name="amount_1" placeholder="Amount"></td>
      </tr>
      <!-- ... 添加更多行 -->
    </tbody>
  </table>
  <button type="submit">Save Data</button>
  <button type="button" id="add_row">Add Row</button>
</form>

JavaScript

// 获取表格元素
const table = document.getElementById("table_data");

// 获取添加行按钮元素
const addRowButton = document.getElementById("add_row");

// 添加新行的计数器
let rowCount = 2;

// 添加行按钮的事件监听器
addRowButton.addEventListener("click", function() {
  // 创建一个新行元素
  const newRow = table.insertRow();

  // 设置行 ID
  newRow.id = `row_${rowCount}`;

  // 创建单元格并添加输入字段
  const cell1 = newRow.insertCell();
  cell1.innerHTML = `<input type="text" name="itemid_${rowCount}" placeholder="ItemID">`;

  const cell2 = newRow.insertCell();
  cell2.innerHTML = `<input type="text" name="amount_${rowCount}" placeholder="Amount">`;

  // 增加计数器
  rowCount++;
});

PHP

<?php
// 获取表单数据
$itemIds = $_POST['itemid'];
$amounts = $_POST['amount'];

// 循环遍历每一行
for ($i = 0; $i < count($itemIds); $i++) {
  $itemId = $itemIds[$i];
  $amount = $amounts[$i];

  // 准备 SQL 语句
  $sql = "INSERT INTO sales (itemid, amount) VALUES ($itemId, $amount)";

  // 执行 SQL 语句
  $result = $conn->query($sql);
}

// 重定向到成功页面
header("Location: success.php");
?>