从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

作为上述 cmets 的替代方案，您可以将表格包装在 <form> 标记内，添加充当命令按钮的 [保存] 输入，因此您可以将文字最小化为仅由用户验证的内容，最后, 使用 jQuery .serialize() 方法向 XHR 方法提供数据，例如 jQuery.ajax 或 jQuery.post

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

为每行添加主键 (pk) 后缀的好处是，您可以让 PHP 表单处理器提取此主键，以发出正确的 SQL 命令：INSERT、UPDATE 或甚至REPLACE。 它也可用于向用户报告无法插入这样或那样的行，并通过其唯一的 PK 指定它... 祝你好运！

编辑 示例：

在 HTML 中

<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>

在 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));
?>