javascript - 动态添加和编辑行

Question

我的代码的作用:

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

直到完成后我才意识到(我正在开发我的第一个大项目)，用户无法编辑他们的个人项目!!!

我认为我应该做什么:

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

JSFIDDLE http://jsfiddle.net/SteveRobertson/XHuVS/1/ JSFIDDLE

我的问题:我的方法是正确的方法吗？我之所以这么问，是因为我不这么认为，但感觉好像我已经把自己逼到了 Angular 落里。我不知道该怎么做。如果不。以可以将行提交到服务器的方式动态编辑行的正确方法是什么？当我为模板调用此函数时，我假设我必须添加某种计数器来为每一行提供唯一的 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 选项的一种解决方案是绑定(bind)表格上的 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 或对象)，以便在编辑完成后更新值。

<小时/>

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