Question

我的代码的作用：

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

直到我完成后我才意识到（我正在开展我的第一个大项目），用户无法编辑他们的个别项目!!!

我认为我应该做什么：

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

的jsfiddle http://jsfiddle.net/SteveRobertson/XHuVS/1/ 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;
  }

虽然我不知道如何准确地完成我的方法所需的大部分方法，但我只是在正确的方向上寻求一点。我知道这是一个冗长的问题以及冗长的代码。感谢您抽出宝贵时间阅读本文以及任何建议或意见。谢谢。

Answer 1

我同意您的计划方法，在提交时生成表单数据。这样可以省去保持隐藏字段更新的麻烦。

隐藏字段：

您当前的代码会生成具有相同ID testid的元素。您可以删除ID，因为它们不会用于任何内容。如果确实需要ID，请确保它们是唯一的。

生成的元素的命名并不表示它们之间存在任何关系，我建议使用如下命名方案：

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

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

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

这是一个question，它展示了如何使用PHP在服务器端处理这个问题。

行生成：

您可以为正在生成的行添加唯一ID，但前提是您需要单独处理行。使用计数器生成附加到字符串的值将用于生成唯一ID。

编辑：

edit选项的一个解决方案是绑定表格上的click事件，并使用on函数检查edit链接。

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

存储父级（TR）的引用（ID或对象）以在编辑完成后更新值。

这不是一个全面的解决方案，但我希望它能为您提供一些线索。

动态添加和编辑行

1 个答案: