jQuery / JavaScript:新添加的行的ID

时间:2012-06-11 09:11:58

标签: javascript jquery forms html-table

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

它具有以下结构:

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

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

当您点击该按钮时,会显示一个模态窗口,您可以使用以下方法将另一个title-author行附加到表中:

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

该表还有每行的编辑和删除按钮。 onclick有:

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

这就是我的问题,ids。

来自数据库的信息有一个固定的id(1和2),但我该如何处理附加“Add More”按钮的行的id?

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

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

newId为3,如果附加了一行,但是如果通过“添加更多”按钮追加第二行,我在newId中再次添加3,这是有效的:((

我该如何解决这个问题?如何在新添加的行中添加连续的ID?

4 个答案:

答案 0 :(得分:1)

在你的函数editRow中写道:

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

// Do your insertion stuff
// ...

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

答案 1 :(得分:1)

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

立即提交

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

<强>赞成

  • 用户可以关闭浏览器,仍然会保存添加的行。

<强>缺点

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

延迟提交

您可以简单地标记新记录,以便在迭代它们来构建AJAX请求时,可以向服务器发送两个单独的列表;一个包含现有的(减去已删除的)和一个只包含新的。

服务器将处理剩下的工作。

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

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

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