Question

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

但是现在我必须在将它们添加到HTML表之后，将添加的行从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()方法将数据提供给XHR方法，例如jQuery.ajax或jQuery.post

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

为每行添加主键（pk）后缀的好处是，您可以让PHP表单处理器提取该主键，并发出适当的SQL命令：INSERT，{{ 1}}甚至UPDATE。它也可以用来向用户报告无法插入这样或这样的行，并通过其唯一的PK指定它。祝你好运！

编辑示例：

HTML格式

REPLACE

在JavaScript中

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

在PHP（processor.php）中

$("#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

从Javascript向MySQL插入多个值

1 个答案: