使用Ajax，jQuery动态构建表单

Question

我正在使用PHP / mySQL / CodeIgniter / jQuery构建一个非常小的Web ERP应用程序 票据/发票是用

构建的

current date
client data
etc

现在，我必须将产品添加到正在创建的新发票中，而无需重新加载/提交页面。每个产品都有其qtty。，描述，单价，小计等。

我想使用Ajax / jQuery添加每个产品“row”。

• 我应该如何动态构建产品表单？我的意思是，允许用户使用Ajax添加新产品行，或从发票中删除产品行？
• 如何汇总表格中所有动态添加的“行”，以获取发票总额？
• 我应该如何接收和处理所有发布数据，以便在发票表中插入正确的发票记录并将产品记录插入到products_invoices表中？

编辑：在这里，您可以看到我想要做的工作示例 http://www.bambooinvoice.org/index.php/invoices/newinvoice

EDIT2：这个jQuery插件似乎是我正在寻找的东西 http://code.google.com/p/jquery-dynamic-form/

Answer 1

由于您使用的是jQuery，我将使用jQuery Grid插件来实现产品行部分。

http://www.trirand.com/blog/

它具有高度可配置性和灵活性，您可以使用Ajax手动或自动填充行（它可以直接从具有简单PHP后端的MySQL表中读取）并且您具有迭代所有行以发布结果的所有工具到服务器，做分页（如果你需要很多行，我们已经成功使用了更多的15.000行）并做了添加＆amp;其他行动。

希望它有所帮助！

Answer 2

基本上，当用户不断添加新数据行时，您必须动态地将表单元素添加到DOM。我相信jquery在使用标准apis访问/修改DOM节点方面会有很多帮助。

为了总结数字，你必须用<span id="value_x">34</span>之类的特殊钩子包装数字字段，其中x是一个计数器。在每次添加此类新数据后，迭代这些span元素并对值求和并在$("#sumtotal").innerHTML = sum;

等字段中显示它们

对表单进行动态更新后，当用户单击“提交”按钮时，所有表单数据将作为正常的发布数据发送到服务器。您必须对要在服务器中处理的数据字段使用正确的name和id属性，并更新某些数据库表。