Question

我有一个动态表格表单输入表单，您可以根据需要添加/删除行。作为一个没有多少经验的人，我一直坚持如何将这些输入保存到mySQL数据库中。

这里是input.php的样子

<form action="insert.php" method="post">
<div class="box-body no-padding">
  <table class="table table-bordered">
    <tr>
      <th>Item</th>
      <th>#</th>
      <th>Qty</th>
      <th>Price</th>
      <th>Total</th>
      <th></th>
    </tr>

    <tr>
      <td><input type="text" id="item" name="item"></td>
      <td><input type="text" id="no" name="no"disabled></td>
      <td><input type="number" id="qty" name="qty"></td>
      <td><input type="number" id="price" name="price"></td>
      <td><input type="number" id="total" name ="total" disabled></td>
      <td><button type="button" class="remove-row"><i class="fa fa-trash"></i></button></td>
    </tr>
  </table>
</div>

<div class="box-body">
  <div class="button-group">
    <a href="javascript:void(0)" class="add-row"><i class="fa fa-plus-circle"></i> Add Item</a>
  </div>
</div>

<div class="box-footer">
  <div class="button-group pull-right">
    <button type="submit" class="btn btn-default">Cancel</button>
    <button type="submit" class="btn btn-primary">Save</button>
  </div>
</div>
</form>

这是我用来添加/删除行的JS（jQuery）代码

<script type="text/javascript">
  window.addEventListener('DOMContentLoaded', function(){
    $(document).ready(function(){
      $(".add-row").on('click', function(){
        var item = "<td><input type='text' id='item'></td>";
        var no = "<td><input type='text' id='no' disabled></td>";
        var qty = "<td><input type='number' id='qty'></td>";
        var price = "<td><input type='number' id='price'></td>";
        var total = "<td><input type='number' id='total' disabled></td>";
        var remove_button ="<td><button type='button' class='remove-row'><i class='fa fa-trash'></i></button></td>";

        var markup = "<tr>" + item + no + qty + price + total + remove_button + "</tr>";
        $("table").append(markup);
      });

      $(".table").on('click', '.remove-row', function(){
        $(this).closest("tr").remove();
      });
    });
  });    
</script>

这是页面的样子：

input page

insert.php

<?php
$connection = mysql_connect("localhost", "root", "");
$db = mysql_select_db("db", $connection);
if(isset($_POST['submit'])){ 
  $item = $_POST['item'];
  $no = $_POST['no'];
  $qty = $_POST['qty'];
  $price = $_POST['price'];

  $query = mysql_query("insert into table(item, no, qty, price) values ('$item', '$no', '$qty', '$price')");
}

?>

我知道insert.php不适用于我的情况，因为我需要将其作为数组输入。问题是：
1.我不知道如何实现前端，因此当我点击＆＃34;添加项目＆＃34;时，我不会有重复的ID /名称 2.我不知道如何将数组（我不知道要创建）插入到mysql中。

我想知道如何在我的情况下实现保存按钮。感谢您的帮助。

Answer 1

首先，请研究mysql_ *函数。它们不应再被使用，因为它们可能导致SQL注入安全问题。使用mysqli_ *代替或像PDO一样使用数据库层。

其次，如果你将“[]”附加到输入标签名称，那么PHP将以数组的形式接收数据，你可以在insert.php中循环它。

<tr>
  <td><input type="text" id="item" name="item[]"></td>
  <td><input type="text" id="no" name="no[]" disabled></td>
  <td><input type="number" id="qty" name="qty[]"></td>
  <td><input type="number" id="price" name="price[]"></td>
  <td><input type="number" id="total" name="total[]" disabled></td>
  <td><button type="button" class="remove-row"><i class="fa fa-trash"></i></button></td>
</tr>

请确保您的javascript代码还添加了name属性：

$(".add-row").on('click', function(){
    var item = "<td><input type='text' id='item' name='item[]'></td>";
    var no = "<td><input type='text' id='no' name='no[]' disabled></td>";
    var qty = "<td><input type='number' id='qty' name='qty[]'></td>";
    var price = "<td><input type='number' id='price' name='price[]'></td>";
    var total = "<td><input type='number' id='total' name='total[]' disabled></td>";
    var remove_button ="<td><button type='button' class='remove-row'><i class='fa fa-trash'></i></button></td>";

    var markup = "<tr>" + item + no + qty + price + total + remove_button + "</tr>";
    $("table").append(markup);
  });

然后在PHP中你可以：

<?php
$connection = mysqli_connect("localhost", "root", "", "db");
if(isset($_POST['submit'])){
    $rowCount = count($_POST['item']);
    // Note that this assumes all the variables will correctly be submitted as arrays of the same length. For completeness and robustness you could add a !empty check for each value.
    for ($i = 0; $i < $rowCount; $i++) {
        $item = $_POST['item'][$i];
        $no = $_POST['no'][$i];
        $qty = $_POST['qty'][$i];
        $price = $_POST['price'][$i];

        $query = mysqli_query($connection, "insert into `table` (item, no, qty, price) values ('$item', '$no', '$qty', '$price')");
    }
}

＆GT;

从动态表输入插入到mySQL

1 个答案: