jQuery/JavaScript：新附加行的 id答案

【问题标题】：jQuery/JavaScript: ids for newly appended rowsjQuery/JavaScript：新附加行的 id
【发布时间】：2012-06-14 04:29:24
【问题描述】：

我的网页中有一个 html 表格。它充满了我数据库中的信息。

它有这样的结构：

Id- Title –Author
1 – Africa – John Smith
2- Europe- Martin Coole

表格位于表单内，并有一个“添加更多”按钮。

当您点击该按钮时，会显示一个模式窗口，您可以使用以下方法将另一个标题作者行附加到表中：

//inside of the addRow function
    $('#myTable').append(“<tr><td>..”);

表格的每一行还有一个编辑和删除按钮。 onclick 有：

//For the edit button
 editRow(id, value1, value2);
//For the delete button
 deleteRow(id);

我的问题来了，ID。

来自数据库的信息有一个固定的 id（1 和 2），但是我应该如何处理附加了“添加更多”按钮的行的 id？

到目前为止，我所做的是从数据库行中获取最后一个 id 并将其放入表中的隐藏字段中，然后放入我的 js 文件中：

var lastID = $('#lastID').val();
var i = 1;
var newId = parseInt (lastID)+i;

newId 为 3，如果添加了一行则有效，但如果通过“添加更多”按钮添加第二行，我在 newId 中再次添加了 3 :((

我该如何解决这个问题？如何将连续的 id 添加到新附加的行中？

【问题讨论】：

【解决方案1】：

在你的函数editRow 中写：

var lastID = $('#lastID').val();

// Do your insertion stuff
// ...

// After insertion, raise lastID by 1
$('#lastID').val(++lastID);

【讨论】：

【解决方案2】：

在页面上保留最后插入的 id 是个坏主意；这是一种竞争条件。有一些方法可以应用：

立即提交

在addRow() 中，您可以直接与服务器通信并添加它；服务器插入记录后，它将返回 id，您可以将其插入到表中。

优点

缺点

您可以简单地标记新记录，以便在迭代它们以构建 AJAX 请求时，可以将两个单独的列表发送到服务器；一个包含现有的（减去已删除的）和一个仅包含新的。

然后服务器会处理剩下的事情。

【讨论】：

【解决方案3】：

在追加新行期间，将 lastId 变量增加 1。

也许更好的解决方案是通过检查表中的所有行并更新变量来重新计算最后一个 Id。

【讨论】：

【解决方案4】：

如果，正如您在 cmets 上所说，您将整个页面一起提交，类似于“保存所有内容”类型的操作，那么新添加的行应该不有一个 ID。不要陷入试图将最后一个已知 ID 增加 1 的陷阱，因为 2 个并发用户最终会覆盖彼此的记录。

对于新行，删除按钮很明显，它只是将新添加的行从表中删除。对于更新，只需更新该行中的数据。这些新行的 id 可以是 0，这样当您提交页面时，您就知道哪些是新的 (Id=0) 哪些是更新的 (Id>0)。

【讨论】：