javascript - 添加行并运行多个 mySQL 查询

Question

我试图找出解决这个问题的最佳方法..我需要能够使用 JS 将输入字段附加到表格行，以便可以使用相同的表单输入多个项目，但我需要以某种方式使每个输入都有一个唯一的名称来作为 PHP 的目标。从那里我需要在每个上运行一个插入语句以插入到 mySQL 数据库中。我有点被难住了

================================================== =======================

   <form action="" method="post" id="myForm">
        <table class="addTable">
            <tr>
                <th>Title</th>
                <th>Type</th>
                <th>Quantity</th>
                <th>Customer Price</th>
            </tr>
            <tr>
                <td>
                    <input type="text" name="name" placeholder="Title" maxlength="60" value="<?php echo $_POST['name']; ?>">
                </td>
                <td>
                    <input type="text" name="type" placeholder="Type" maxlength="20" value="<?php echo $_POST['type']; ?>">
                </td>
                <td>
                    <input type="number" name="qty" placeholder="QTY" max="100" value="<?php echo $_POST['qty']; ?>">
                </td>
                <td>
                    <input type="text" name="price" placeholder="Price" value="<?php echo $_POST['price']; ?>">
                </td>
            </tr>
        </table>
    </form>

Answer 1

您可以使用数组作为名称，例如:

   <form action="" method="post" id="myForm">
        <table class="addTable">
            <tr>
                <th>Title</th>
                <th>Type</th>
                <th>Quantity</th>
                <th>Customer Price</th>
            </tr>
            <tr>
                <td>
                    <input type="text" name="name[]" placeholder="Title" maxlength="60" value="<?php echo $_POST['name']; ?>">
                </td>
                <td>
                    <input type="text" name="type[]" placeholder="Type" maxlength="20" value="<?php echo $_POST['type']; ?>">
                </td>
                <td>
                    <input type="number" name="qty[]" placeholder="QTY" max="100" value="<?php echo $_POST['qty']; ?>">
                </td>
                <td>
                    <input type="text" name="price[]" placeholder="Price" value="<?php echo $_POST['price']; ?>">
                </td>
            </tr>
        </table>
    </form>

然后你可以使用类似的东西:

<?php
for($i = 0; $i < count($_POST['name']; $i++) {
  $name = $_POST['name'][$i];
  $type = $_POST['type'][$i];
  $qty = $_POST['qty'][$i];
  $price = $_POST['price'][$i];
  // make your query here
}

还有一个小建议:在你的 html 代码中不要直接回显 $_POST 值，首先检查它们是否存在，例如。 G。 <?= isset($_POST['price'])?$_POST['price']:""?>

<?=是 <?php echo 的快捷方式

isset($_POST['price'])?$_POST['price']:""部分是 if-else 的快捷方式陈述。 (称为 ternary operator )

意思是一样的:

if(isset($_POST['price'])) {
  echo $_POST['price'];
} else {
  echo "";
}

还有isset()它本身检查变量(或本例中的数组键)是否存在。

编辑:更新了有关附加的信息

如果你会使用 jQuery，那就很简单了。如果您不使用它，请开始使用它:)

<script>
$(document).ready(function() {
  $('.some-class-of-your-button').click(function() {
    $('.addTable').append($('.addTable tr:nth-child(2)').clone());
    $('.addTable tr:last-child input').val("");
  });
});
</script>

替换some-class-of-your-button与您的按钮具有的类。该按钮必须位于表格之外才能正常工作。