Javascript 动态添加和编辑行

我的代码的作用：

• 一个“添加项目”按钮会弹出一个弹出窗口（#addquoteitem），其中包含表单1的提交。在表格中根据模板和2创建新行。创建隐藏的输入（不隐藏在JSFIDLE中），因为我认为这是将数据提交到服务器的最简单方法
• 一个“提交报价”按钮，然后通过“隐藏输入”表单将这些行中的每一行单独提交到服务器

我没有意识到，直到我做了（我在我的第一个大项目的工作），用户不能编辑他们的个人项目

我想我应该做什么：

• 为每一行添加一个编辑按钮，该按钮会弹出一个弹出窗口，它将使用jquery更改相应行的值，然后更改它，以便在按下最终的“提交报价”按钮之前不会创建“隐藏输入”。

JSFIDDLE JSFIDDLE
我的问题：我的方法正确吗？我这样问只是因为我不认为是这样，但我觉得好像我把自己编码到了一个角落里。我不知道该怎么办。如果没有。以可以提交到服务器的方式动态编辑行的正确方法是什么？当我为模板调用这个函数时，我假设我必须添加某种计数器来给每一行一个唯一的ID，或者可以用另一种方式来标识该行

  function template(row, quoteItem) {
    row.find('.item_num').text(quoteItem.number);
    row.find('.item_desc').text(quoteItem.description);
    row.find('.item_price').text(quoteItem.price);
    return row;
  }

---

虽然我不知道如何准确地完成我的方法所包含的大多数方法，但我只要求在正确的方向上指出一点。我理解这是一个冗长的问题，也是一个冗长的代码。我感谢您抽出时间阅读本文以及任何建议或建议。谢谢。
我同意您计划的方法，在提交时生成表单数据。这将省去保持隐藏字段更新的麻烦
隐藏字段：
当前代码生成具有相同ID的元素

testid

。您可以删除该ID，因为它们不会用于任何用途。如果确实需要ID，请确保它们是唯一的
生成的元素的命名并不表示它们之间的任何关系，我建议使用如下命名方案：

items[0].name
items[0].description
items[0].price
items[1].name
items[1].description
items[1].price
...

<>你也可以考虑通过表单提交。在这种情况下，您可以在提交时构造表单数据对象。它可能看起来像：

[ 
  {name: 'Item 1', description: 'first item', price: '123'},
  {name: 'Item 2', description: 'second item', price: '234'},
  ...
]

下面是一个示例，展示了如何使用PHP在服务器端处理此问题

---

行生成：
您可以向正在生成的行添加一个唯一的ID，但前提是您需要单独寻址这些行。使用计数器生成附加到字符串的值将用于生成唯一ID

---

编辑：

编辑

选项的一个解决方案是绑定表上的

单击

事件，并使用函数检查

编辑

链接

$('#quote').on('click', '.edit-link', function (e) {
  e.preventDefault();
  //$(this) - edit link
  //$(this).closest('tr') - parent table row
  //$(this).closest('tr').find('.item_num') - span containing number of items
  //$(this).closest('tr').find('.item_num').text() - number of items
  ...
});

表行

<tr>
    <td><span class="item_num">1</span></td>
    <td><span class="item_desc">rt</span></td>
    <td><span class="item_price">asd</span></td>
    <td><a href="#" class="edit-link">Edit</a></td>
</tr>

1.
rt
自闭症

保存父（TR）引用（ID或对象），以在编辑完成后更新值

---

---

这不是一个全面的解决方案，但我希望它能为您提供一些线索。
我同意您计划的方法，在提交时生成表单数据。这将省去保持隐藏字段更新的麻烦
隐藏字段：
当前代码生成具有相同ID的元素

testid

。您可以删除该ID，因为它们不会用于任何用途。如果确实需要ID，请确保它们是唯一的
生成的元素的命名并不表示它们之间的任何关系，我建议使用如下命名方案：

items[0].name
items[0].description
items[0].price
items[1].name
items[1].description
items[1].price
...

<>你也可以考虑通过表单提交。在这种情况下，您可以在提交时构造表单数据对象。它可能看起来像：

[ 
  {name: 'Item 1', description: 'first item', price: '123'},
  {name: 'Item 2', description: 'second item', price: '234'},
  ...
]

下面是一个示例，展示了如何使用PHP在服务器端处理此问题

---

行生成：
您可以向正在生成的行添加一个唯一的ID，但前提是您需要单独寻址这些行。使用计数器生成附加到字符串的值将用于生成唯一ID

---

编辑：

编辑

选项的一个解决方案是绑定表上的

单击

事件，并使用函数检查

编辑

链接

$('#quote').on('click', '.edit-link', function (e) {
  e.preventDefault();
  //$(this) - edit link
  //$(this).closest('tr') - parent table row
  //$(this).closest('tr').find('.item_num') - span containing number of items
  //$(this).closest('tr').find('.item_num').text() - number of items
  ...
});

表行

<tr>
    <td><span class="item_num">1</span></td>
    <td><span class="item_desc">rt</span></td>
    <td><span class="item_price">asd</span></td>
    <td><a href="#" class="edit-link">Edit</a></td>
</tr>

1.
rt
自闭症

保存父（TR）引用（ID或对象），以在编辑完成后更新值

---

---

这不是一个全面的解决方案，但我希望它能为您提供一些线索。
是的，太好了，非常感谢。非常感谢你。我感到迷路了。谢谢。@Four-lo很高兴我能帮上忙！是的，太好了，非常感谢。非常感谢你。我感到迷路了。谢谢。@Four-lo很高兴我能帮上忙！