Question

<html>
    <body>
        <form method="POST" action="">
          <label>Select your Category:</label>
          <input type="text" name="category" id="cat-list"/>
          </br>
          <label> Display Name:</label>
          <input type="text" name="display_name" id="displayname"/>
          </br>
          <label> Select your Subcategory:</label>
          <input type="text" name="pagename" id="subcat-list"/>
          </br>
          <label>Set Order</label>
          <select name="privilage" id="privilage" required>
            <option value="">Select</option>
            <option value="1">1</option>
            <option value="2">2</option>
          </select>
          </br>
          <button type="button" name="add" id="savebutton"><i class="icon-check-sign" aria-hidden="false"></i>Add</button>

          <table id="pTable" class="table table-hover" width="100%" cellspacing="0" style="border: 1px; height:10px;" >
            <thead style="background-color:#CCE5FF">
              <tr id="row">
                <th>Category</th>
                <th>DisplayName</th>
                <th>Subcategory</th>
                <th>Order</th>
                <th colspan=2>Action</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
          <button type="submit" name="import" > Import Database</button>
        </form>

        <script src="  https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script> 
        <script>
        var i=0;
        currentRow = null;
        $("button#savebutton").click(function(){  
            var cat = $("#cat-list").val();
            var display = $("#displayname").val();
            var subcat = $("#subcat-list").val(); 
            var order = $("#privilage").val();                              
            i++;    
            //Inserting first row to the table with edit and delete button  
            var new_row = "<tr id='row"+i+"' class='info'><td class='cat'>" + cat + "</td><td class='display'>" + display + "</td><td class='type'>" + subcat +"</td><td>"+order +"</td><td><span class='editrow'><a class='fa fa-edit' href='javascript: void(0);'>Edit</a></span></td><td><span class='deleterow'><a class='glyphicon glyphicon-trash' href=''>Delete</a></span></tr>";   
            //Appending the new row to the table                        
            if(currentRow){
                $("table tbody").find($(currentRow)).replaceWith(new_row);
                currentRow = null;
            }
            else{
                $("table tbody").append(new_row);
            }
        });
        //Editing the row entered
        $(document).on('click', 'span.deleterow', function () {
            $(this).parents('tr').remove();
            return false;
        });

        //Deleting the row          
        $(document).on('click', 'span.editrow', function () {
            currentRow= $(this).parents('tr');                  
        });
        </script>
        <?php
        require('connection1.php');
        echo 123;

        if(isset($_POST['import'])){
            $query=mysqli_query($db,"INSERT INTO selectedpages(display_name,category,pagename,privilage) values('".$_POST['display_name']."','".$_POST['category']."','".$_POST['pagename']."','".$_POST['privilage']."')") or die(mysqli_error($db));      
            if($query>0){
            echo "Success";
            }
            else {
                echo "failed";
            }
        }
        ?>

内容：代码是向数据库输入多行值，但问题是只有最后一行值进入数据库。如果有3行，只有第三行详细信息进入数据库。首先，表单有一个添加按钮和导入按钮。添加按钮用于添加行，然后必须单击导入按钮以将这些行值输入到数据库。

Answer 1

当您提交表单时，它会通过邮件发送输入，而不是整个表格。并且由于输入仍然是最后添加的行的值，它通过POST发送这些值，这些值将被插入到数据库中。

以下是解决问题的方法：
1）使用javascript onclick方法拦截formsubmit（您必须使用e.preventDefault来停止实际提交）。
2）使用jQuery读取所有表行，创建一个带有它们的数组selectedPages，如下所示：
^{（这是它应该如何照顾，而不是你如何创造它：P）}

selectedPages {
    [
        "category": "Foo",
        "displayName": "FooBar",
        "pageName": "Bar",
        "privilage": 1
    ],[
        "category": "Foo",
        "displayName": "FooBar",
        "pageName": "Bar",
        "privilage": 1
    ],[
        "category": "Foo",
        "displayName": "FooBar",
        "pageName": "Bar",
        "privilage": 1
    ]
}

3）创建新的php文件，将您当前拥有的PHP代码放在同一文件的底部。
4）向新的php文件发出AJAX发布请求，将您的selectedPages作为数据发送在php文件中 5），迭代数组并在数据库中插入每个项目。

Answer 2

您在#pTable表中添加的每个输入都应该是数组，例如product []，然后在PHP代码中，您在for / foreach中遍历数组并在DB中插入每一行

Answer 3

您必须prevent the form submission。并通过阅读表格#pTable创建JSON data string。
在表单中添加隐藏字段<input type="hidden" name="import_data">。它将JSON字符串传递给服务器端。

我在HTML中做了一些更改：

var i = 0;
currentRow = null;
$("button#savebutton").click(function() {

  var cat = $("#cat-list").val();
  var display = $("#displayname").val();
  var subcat = $("#subcat-list").val();
  var order = $("#privilage").val();
  i++;


  //Inserting first row to the table with edit and delete button  
  var new_row = "<tr id='row" + i + "' class='info'><td class='cat'>" + cat + "</td><td class='display'>" + display + "</td><td class='type'>" + subcat + "</td><td>" + order + "</td><td><span class='editrow'><a class='fa fa-edit' href='javascript: void(0);'>Edit</a></span></td><td><span class='deleterow'><a class='glyphicon glyphicon-trash' href=''>Delete</a></span></tr>";

  //Appending the new row to the table                         

  if (currentRow) {
    $("table tbody").find($(currentRow)).replaceWith(new_row);
    currentRow = null;
  } else {
    $("table tbody").append(new_row);
  }

});
//Editing the row entered
$(document).on('click', 'span.deleterow', function() {
  $(this).parents('tr').remove();
  return false;
});

//Deleting the row          
$(document).on('click', 'span.editrow', function() {
  currentRow = $(this).parents('tr');
});

$('#import-form').submit(function(event) {

  var import_data = $('[name=import_data]');

  if (import_data.val() == "") {
    event.preventDefault();
    var tbl = $('table#pTable tr').get().map(function(row) {
      return $(row).find('td').get().map(function(cell) {
        return $(cell).html();
      });
    });

    var convertTableToJson = function() {
      var rows = [];
      $('table#pTable tr').each(function(i, n) {
        // Ignore empty
        if (i != 0) {
          var $row = $(n);
          rows.push({
            display_name: $row.find('td:eq(0)').text(),
            category: $row.find('td:eq(1)').text(),
            pagename: $row.find('td:eq(2)').text(),
            privilage: $row.find('td:eq(3)').text()
          });

        }
      });
      return JSON.stringify(rows);
    };

    import_data.val(convertTableToJson);
    $(this).submit();
  }


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <form method="POST" action="" id="import-form">
    <label>Select your Category:</label>
    <input type="text" name="category" id="cat-list" />
    </br>

    <label> Display Name:</label>
    <input type="text" name="display_name" id="displayname" />
    </br>

    <label> Select your Subcategory:</label>
    <input type="text" name="pagename" id="subcat-list" />
    </br>


    <label>Set Order</label>
    <select name="privilage" id="privilage" required>
  <option value="">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>
    </br>

    <button type="button" name="add" id="savebutton"><i class="icon-check-sign" aria-hidden="false"></i>Add</button>

    <table id="pTable" class="table table-hover" width="100%" cellspacing="0" style="border: 1px; height:10px;">
      <thead style="background-color:#CCE5FF">
        <tr id="row">
          <th>Category</th>
          <th>DisplayName</th>
          <th>Subcategory</th>
          <th>Order</th>
          <th colspan=2>Action</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
    <button type="submit" name="import"> Import Database</button>

    <input type="hidden" name="import_data">

  </form>
</body>

</html>

并替换 PHP块，

<?php
        require('connection1.php');
        echo 123;

        if(isset($_POST['import'])){
            $query=mysqli_query($db,"INSERT INTO selectedpages(display_name,category,pagename,privilage) values('".$_POST['display_name']."','".$_POST['category']."','".$_POST['pagename']."','".$_POST['privilage']."')") or die(mysqli_error($db));      
            if($query>0){
            echo "Success";
            }
            else {
                echo "failed";
            }
        }
        ?>

以下

<?php 

require('connection1.php');

if (isset($_POST['import_data'])) {
          $import_data = json_decode($_POST['import_data'], true);

          $query = "INSERT INTO selectedpages (display_name,category,pagename,privilage) VALUES ";

          $values = array();

          // Create value rows array 
          foreach ($import_data as $key => $row) {
            // Added single quotes
            $values[]  = "('" . implode("', '", $row) . "')";
          }

          $query .= implode(", ", $values);
          echo $query;

          $execute_query = mysqli_query($db, $query) or die(mysqli_error($db));  

          if($execute_query>0)
          {
            echo "Success";
          }
        }

?>

如何使用php将表的多行值插入数据库

3 个答案: