PHP Mysql & Jquery动态填充多条记录

Question

我想以上主系统和子系统使用PHP，MYSQL和JQuery。

我在See screenshot下面附上了样本图片链接

产品数量和计量单位是属于MAster表的字段，编码、部件、类别、数量(也)和计量单位(重复)属于下级表。

我想添加代码，组件，类别，数量等多次用户点击添加。我只需要知道，当有人完成他们的工作并单击最终保存按钮时，我如何保存所有这些多个记录？

我真的非常积极地寻找这一点，但没有得到任何回应。

如果任何人能找到方法或任何帮助，或任何能帮助我走向这个系统的人。

非常感谢，请帮助

Answer 1

你会想要使用

用于保存数据的jQuery ajax

.clone()要在UI中添加记录，您必须重置将执行该操作的值

这应该会让你开始

Answer 2

每当你的用户点击“添加”时，你想要获取表单输入的值，构建一个新的表行并显示他们选择的值。这很简单，但您还需要添加隐藏输入，这些输入表示用户在上面的选择框中选择的内容，因此当用户单击保存时，整个表单都会发布，您可以处理这些输入。一个简单的例子是：

<script>
var count = 0;

$('#add').click(function(event)
{
    var code        = $('#code').val(),
        component   = $('#component').val()
        category    = $('#category').val(),
        uom         = $('#uom').val();

    $('#table').append(
        '<tr>'
            + '<td>' + code + '<input type="hidden" name="record[' + count + '][code]"></td>'
            + '<td>' + component + '<input type="hidden" name="record[' + count + '][component]"></td>'
            + '<td>' + category + '<input type="hidden" name="record[' + count + '][category]"></td>'
            + '<td>' + uom + '<input type="hidden" name="record[' + count + '][uom]"></td>'
        + '</tr>'
    );

    /*
    EDIT: I changed this to a DECREMENTOR so our keys don't overlap and override
    anything that is CURRENTLY in the database
    */
    count --;
})
</script>

这会将一个单击处理程序附加到add按钮。每次单击它时，我们都会获取输入的值，将它们存储在一个变量中，然后构建并添加一个新的表行到下面的“预览表”中，该表显示了他们选择的值，并创建了隐藏的输入，这些输入可以在用户单击保存后进行处理。

注意：-它只获取所选输入的值(因此对于选择框，option的value而不是文本。您必须做一些额外的工作来将其替换到您的表行中。-您的整个表必须封装在<form>标记中，您的save按钮也必须在其中。

一旦您将发布的数据发送到服务器，执行一个print_r($_POST)来查看它的样子，您应该能够弄清楚如何相当容易地处理它。

edit好的，你在这里问了很多问题，我会尽我所能解决这些问题，而不是写小说。

1. 如果有人错误地点击了add并想要取消添加(或者改变了主意，诸如此类)，该怎么办？

这其实并不难。如果发生这种情况，只需使用$.remove从表中删除附加的表行。由于所有隐藏的input元素都包含在表行中，因此它们也将从表单中删除，因此当用户发布时，这些字段将不会出现。

• 您应该如何清理数据？

当用户单击add时，在填充表单时清理数据，而不是在发布表单之前清理数据。当用户单击“添加”时，处理输入错误将比单击“保存”时更容易处理。

• 如果要修改数据库中的现有记录，如何使用此方法？

有几种不同的方法可以处理这个问题。最简单的方法是在表单中为数据库中的每个现有行预先填充表行，并在表行上为该记录添加一个id (假设每行都有一个自动递增的主键)输入值。这样，当您处理表单时，您将能够通过检查发布的数据中是否存在id并验证它是否存在于您的数据库中，来查看它是否是现有记录。如果它没有id键，您就知道它是一个新记录，您需要执行一个INSERT，如果它有，您可以执行一个UPDATE或保留该记录。对于DELETED行，您需要在执行任何INSERT操作之前遍历POSTed数据，收集已发布的id值，并运行类似于DELETE FROM table WHERE ID IN (<list of posted ids>)的查询。这将删除用户删除的所有行，然后您可以再次遍历POSTed数据并插入新行。

预先填充此表的示例如下所示：

<?php
$query = "SELECT * FROM bill_items WHERE bill_id = 123";
$result = mysql_query($query);
$materials = array();
while ($row = mysql_fetch_assoc($query))
{
    $materials []= $row;
}
?>

<? foreach ($materials as $material): ?>
    <tr>
        <td>
            <?= $material['code']; ?>
            <input type="hidden" name="record[<?= $material['id']; ?>][code]" 
                value="<?= $material['uom']; ?>">
        </td>
        <td>
            <?= $material['component']; ?>
            <input type="hidden" name="record[<?= $material['id']; ?>][component]"
                value="<?= $material['uom']; ?>">
        </td>
        <td>
            <?= $material['category']; 
            <input type="hidden" name="record[<?= $material['id']; ?>][category]"
                value="<?= $material['uom']; ?>">
        </td>
        <td>
            <?= $material['quantity']; ?>
            <input type="hidden" name="record[<?= $material['id']; ?>][quantity]"
                value="<?= $material['uom']; ?>">
        </td>
        <td>
            <?= $material['uom']; ?>
            <input type="hidden" name="record[<?= $material['id']; ?>][uom]"
                value="<?= $material['uom']; ?>">

            <input type="hidden" name="record[<?= material['id']; ?>][id]"
                value="<?= $material['id']; ?>">
        </td>
    </tr>
<? endforeach; ?>

还有，一张纸条。我更改了上面的javascript示例代码。我将count++更改为count--，因为当您使用数据库中的当前数据预先填充表单时，您将在输入键中使用材料的id。当用户添加新数据时，使用javascript (使用count++)生成的键可能会与现有的表数据冲突。为了纠正这个问题，我们将其更改为count--。这个键(在javascript中)真的不重要，它只是将我们的数据分组在一起，所以这里的负值不会影响任何东西。