从Javascript向mysql插入多个值

Question

我使用此命令向表添加值。此代码有助于向表中添加多个行，还可以通过选择不需要的行来删除一行。

但是现在我必须在发布后将那些从html表中添加的行插入到mysql php表中。

如何将添加的值从表插入到mysql表。

    <script type="text/javascript" src="main.js" charset="UTF-8"></script><link rel="stylesheet" crossorigin="anonymous" href="https:///abn/main.css"/>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".add-row").click(function(){
                var name = $("#name").val();
                var email = $("#email").val();
                var price = $("#price").val();
                var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td><td>" + price + "</td></tr>";
                $("table tbody").append(markup);
            });

            // Find and remove selected table rows
            $(".delete-row").click(function(){
                $("table tbody").find('input[name="record"]').each(function(){
                    if($(this).is(":checked")){
                        $(this).parents("tr").remove();
                    }
                });
            });
        });    
    </script>

<table>
  <thead>
   <tr>
      <th>Select</th>
      <th>Product Description</th>
      <th>Quantity</th>
      <th>Unit Price</th>
      <th>Total Price</th>
   </tr>
  </thead>
<tbody>
   <tr>              
   </tr>
</tbody>
</table>
<button type="button" class="delete-row">Delete Row</button>
<input type="button" class="add-row btn btn-success" value="Add Row">

Answer 1

或者，对于上面的注释，您可以将表包装在<form>标记中，添加一个作为命令按钮的保存输入，从而将文章最小化到用户验证的内容，最后，使用jQuery .serialize()方法向jQuery.ajax或jQuery.post等XHR方法提供数据

作为HTML布局的一部分，您将为每一行添加3个输入字段，例如txtName_<pk>、txtPrice_<pk>和txtEmail_<pk>，这些字段将由.serialize()作为数据自动发送。

为每一行使用主键(pk)作为后缀的好处是，您可以让PHP处理器提取这个主键，以发出适当的SQL命令：INSERT、UPDATE甚至REPLACE。它还可用于向用户报告不能插入这样或那样的行，并通过其唯一的PK.祝好运!

编辑示例：

在中的应用

<form id="frmTable">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="hidden" name="txtName_10244" value="John Doe" />John Doe</td>
                <td><input type="hidden" name="txtEmail_10244" value="john.doe@state.country.earth" />john.doe@state.country.earth</td>
                <td><input type="hidden" name="txtPrice_10244" value="314.15" />$314.15</td>
            </tr>
        </tbody>
    </table>

<input id="cmdSave" type="submit" />

</form>

in JavaScript

$("#cmdSave").click(function() {
    $.post("processor.php", $("#frmTable").serialize())
    .done(function(data) {
        alert("Your table was saved.");
    });

});

//  You may exploit here the data (JSON) that was returned by processor.php

PHP中的 (processor.php)

<?php
header("Content-Type: application/json");

$data = array('success' => false, 'error' => null);
$errors = array();

foreach($_POST as $key => $val) {

    if (preg_match("/^txtName_(\d+)$/", $key, $bits)) {
        // all right, we've got a row, so let's send its data to the function that saves it.

        $ans = saveRow(
            $primaryKey = $bits[1],
            array(
                'name' => $val,
                'email' => $_POST["txtEmail_" . $primaryKey],
                'price' => $_POST["txtPrice_" . $primaryKey]
            )
        );
        if (!$ans) $errors []= "Couldn't save row #" . $bits[1];

    } 

}

if(empty($errors))
    $data['success'] = true;
else
    $data['error'] = implode('<br />', $errors);

exit(json_encode($data));
?>