如何将动态创建的表行数据保存到数据库

时间:2017-11-26 14:10:28

标签: javascript php html

这是我的HTML和javascript脚本

<form method="POST" action="backend/backup.php">
  <div class="box-body col-sm-12">
    <input type="hidden" name="txtSlNo" id="txtSlNo" value="1">
    <div class="col-sm-2">
      <label for="Date" class="control-label">Date:</label>
      <input type="text" class="text-right" name="date" id="date" value="<?php  echo date(" Y/M/D ")?>">
    </div>
    <div class="col-sm-1">
      <label for="name" class="control-label">Amount:</label>
      <input type="text" size="7" class="text-right" name="txtAmount" id="txtAmount" oninput="calculate()" onkeypress="return isNumber(event);">
    </div>
    <div class="col-sm-1">
      <label for="name" class="control-label">Unit:</label>
      <input type="text" size="7" name="txtUnit" class="text-right" id="txtUnit" oninput="calculate()" value="1" onkeypress="return isNumber(event);">
    </div>
    <div class="col-sm-1">
      <label for="name" class="control-label">Total:</label>
      <input type="text" size="7" name="txtTotal" class="text-right" id="txtTotal" oninput="calculate();" oninput="addTotal();" readonly>
    </div>
    <div class="col-sm-2">
      <br>
      <!--  <button name="add" id="add" class="btn btn-primary" hidden="hidden">Add</button>  -->
    </div>
    <div class="col-sm-2">
      <input type="button" value="add" name="tableAdd" id="tableAdd" class="btn btn-primary add add1">
    </div>
  </div>
  <div class="col-xs-12">
    <table id="tabledata" name="tabledata">
      <thead>
        <tr>
          <th style="width: 50px; text-align: center !important;" id="select">select</th>
          <th style="width: 50px; text-align: center !important;">Sl.No</th>
          <th style="width: 125px; text-align: center !important;">Date</th>
          <th style="width: 175px; text-align: center !important;">Service</th>
          <th style="width: 80px; text-align: center !important;">Charge</th>
          <th style="width: 80px;">Amount</th>
          <th style="width: 80px;">Unit</th>
          <th style="width: 80px;">Total</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  <button type="button" id="delete-row" class="delete-row">Delete Row</button>
  <button class="print" onclick="myFunction()">Print this page</button>
  <br>
  <label class="GrandTotalLabel" id="GrandTotalLabel">GRAND TOTAL</label>
  <input type="text" name="txtGrandTotal" value="00.00" class="txtGrandTotal" oninput="addTotal();" id="txtGrandTotal" readonly/>

这是我的javascript代码

<div id="ta">

<script type="text/javascript">
var lclCount=0;
$("#tableAdd").click(function(){

       var sl_no = ($('#tabledata tr').length) - 1;

        lclCount++;
        sl_no++;

        var date = $("#date").val();
        var amount = $("#txtAmount").val();
        var unit = $("#txtUnit").val();
        var total = $("#txtTotal").val();
        var markup = "<tr><td class='mar'><input type='checkbox' class='chk' 
  name='record' id='"+ lclCount +"'></td><td name='slno' class='slno' id 
   ='slno-"+sl_no+"'>" 
         + sl_no + "</td><td class='date1' name='date'>"
         + date + "</td><td name='amount'>"
         + amount + "</td><td name='unit'>"
         + unit + "</td><td name='total' id='txtTot-"+lclCount+"'>"
         + parseFloat(total).toFixed(2) + "</td></tr>";
        $("#tabledata").append(markup);
        addTotal();

        refreshAdd();



    });
  </script>
  <!-- <div class="page-break"></div> -->
</div>
<input type="submit" name="save" value="save">

最后这里是我的PHP代码

<?php
$servername = "localhost";
$username = "1234";
$password = "";
$dbname = "tad";
$conn = new mysqli($servername, $username, $password, $dbname);
if(isset($_POST["save"]))
{
  $date = $_POST["date"];
  $amount = $_POST["txtAmount"];
  $unit = $_POST["txtUnit"];
  $total = $_POST["txtTotal"];
  $sql = "INSERT INTO backup_master (backup_date, backup_amount, backup_unit, backup_total) VALUES ('$date', '$amount', '$unit', '$total')";
  $result  = mysqli_query($conn, $sql);
}
?>

这里我想将动态创建的表数据生成保存到数据库但是我尝试了很多但是无法保存到数据库中获取未定义索引日期数量等错误。这里我想为每个生成id自动生成的表行但没有得到如何生成的行是否还有其他解决方案。提前谢谢。

1 个答案:

答案 0 :(得分:0)

通过在输入名称上使用“数组”,通过在数组中定义输入名称,例如:“date”将是“date []”

,这是你如何做到的。
<form method="POST" action="backend/backup.php">
    <div class="box-body col-sm-12">
        <input type="hidden" name="txtSlNo" id="txtSlNo" value="1">
        <div class="col-sm-2">
            <label for="Date" class="control-label">Date:</label>
            <input type="text" class="text-right" name="date[]" id="date" value="<?php  echo date(" Y/M/D ")?>">
        </div>
        <div class="col-sm-1">
            <label for="name" class="control-label">Amount:</label>
            <input type="text" size="7" class="text-right" name="txtAmount[]" id="txtAmount" oninput="calculate()" onkeypress="return isNumber(event);">
        </div>
        <div class="col-sm-1">
            <label for="name" class="control-label">Unit:</label>
            <input type="text" size="7" name="txtUnit[]" class="text-right" id="txtUnit" oninput="calculate()" value="1" onkeypress="return isNumber(event);">
        </div>
        <div class="col-sm-1">
            <label for="name" class="control-label">Total:</label>
            <input type="text" size="7" name="txtTotal[]" class="text-right" id="txtTotal" oninput="calculate();" oninput="addTotal();" readonly>
        </div>
        <div class="col-sm-2">
            <br>
            <!--  <button name="add" id="add" class="btn btn-primary" hidden="hidden">Add</button>  -->
        </div>
        <div class="col-sm-2">
            <input type="button" value="add" name="tableAdd" id="tableAdd" class="btn btn-primary add add1">
        </div>
    </div>
    <div class="col-xs-12">
        <table id="tabledata" name="tabledata">
            <thead>
                <tr>
                    <th style="width: 50px; text-align: center !important;" id="select">select</th>
                    <th style="width: 50px; text-align: center !important;">Sl.No</th>
                    <th style="width: 125px; text-align: center !important;">Date</th>
                    <th style="width: 175px; text-align: center !important;">Service</th>
                    <th style="width: 80px; text-align: center !important;">Charge</th>
                    <th style="width: 80px;">Amount</th>
                    <th style="width: 80px;">Unit</th>
                    <th style="width: 80px;">Total</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <button type="button" id="delete-row" class="delete-row">Delete Row</button>
    <button class="print" onclick="myFunction()">Print this page</button>
    <br>
    <label class="GrandTotalLabel" id="GrandTotalLabel">GRAND TOTAL</label>
    <input type="text" name="txtGrandTotal" value="00.00" class="txtGrandTotal" oninput="addTotal();" id="txtGrandTotal" readonly/>

在服务器端,您迭代接收到的数组:

<?php
$servername = "localhost";
$username = "1234";
$password = "";
$dbname = "tad";
$conn = new mysqli($servername, $username, $password, $dbname);
if(isset($_POST["save"]))
{
    $numberOfRows = count($_POST['date']); // get the number of rows

    for ($i = 0; $i < $numberOfRows; $i++) {
        $date = $_POST["date"][$i];
        $amount = $_POST["txtAmount"][$i];
        $unit = $_POST["txtUnit"][$i];
        $total = $_POST["txtTotal"][$i];
        $sql = "INSERT INTO backup_master (backup_date, backup_amount, backup_unit, backup_total) VALUES ('$date', '$amount', '$unit', '$total')";
        $result  = mysqli_query($conn, $sql);
    }
}
?>