jQuery/JavaScript:新附加行的 ids

jQuery/JavaScript: ids for newly appended rows

本文关键字：ids 新附加 JavaScript jQuery      更新时间：2023-09-26

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

它具有以下结构：

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

该表位于表单内，并具有"添加更多"按钮。

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

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

该表还具有每行的编辑和删除按钮。 点击具有：

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

我的问题来了，ids。

来自数据库的信息具有实心 id（1 和 2），但我应该如何处理附加有"添加更多"按钮的行的 id？

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

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

newId 是 3，如果附加了一行，这是有效的，但如果通过"添加更多"按钮附加第二行，我在 newId 中再次有 3 :(（

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

在你的函数中editRow写：

var lastID = $('#lastID').val();
// Do your insertion stuff
// ...
// After insertion, raise lastID by 1
$('#lastID').val(++lastID);

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

立即提交

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

优点

  • 用户可以关闭浏览器，添加的行仍将保存。

缺点

  • 如果要添加多条记录，服务器通信可能会减慢数据输入速度。
  • 因此，每次编辑/删除也需要进行服务器往返。

延迟提交

您可以简单地标记新记录，以便在循环访问它们以构造 AJAX 请求时，可以向服务器发送两个单独的列表;一个包含现有列表（减去已删除的列表），另一个仅包含新列表。

然后，服务器将负责其余的工作。

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

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

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

对于新行，

删除按钮很明显，它只是从表中删除新添加的行。对于更新，只需更新该行中的数据。可以为这些新行指定 id 0，以便在提交页面时知道哪些是新的 （Id=0），哪些是更新的 （Id>0）。

相关文章：