如何在维护顺序元素 ID 的同时添加和删除表行？答案

【问题标题】：How might I add and remove table rows whilst maintaining sequential element IDs?如何在维护顺序元素 ID 的同时添加和删除表行？
【发布时间】：2011-01-17 02:50:41
【问题描述】：

我正在开发我一直在研究的 CMS 的后端。

我有一个 HTML 表，我希望用户能够从中添加和删除行。每行将包含各种用户输入（文本框、复选框……）。然后当用户完成后，它将被保存在数据库中。

我想知道最好的方法是什么。

我猜桌子应该是这样的：

<table>
<tr>
<td><input name="name_1" type="text" /></td>
<td><input name="address_1" type="text" /></td>
</tr>
<tr>
<td><input name="name_2" type="text" /></td>
<td><input name="address_2" type="text" /></td>
</tr>
<tr>
<td><input name="name_3" type="text" /></td>
<td><input name="address_3" type="text" /></td>
</tr> 
</table>

我想象我将有一个噩梦，给每一行中的每个元素一个 id，如果用户删除第 2 行会发生什么...所有 id 之后需要重新排序。

如何最好地使用 JavaScript 添加和删除行并维护顺序 ID？

【问题讨论】：

标签： javascript html dom html-table

【解决方案1】：

您应该改用name="address[]" 等。这样，当你发布它时，服务器上的处理文件会收到一个数组，其中包含所有值，按照对应的<input />s 在 HTML 代码中出现的顺序。

（我知道 PHP 会自动执行此操作：将以 [] 结尾的输入 names 转换为数组。不了解其他语言）

【讨论】：

【解决方案2】：

为什么 ID 需要是连续的？您是否没有使用 jQuery 之类的 JavaScript 库，它可以返回行列表，如果您需要访问该行，您可以从中访问第 X 行？

如果您在删除（或添加）ID 中间的一行时尝试迭代更新 ID，我认为您会遇到同步问题。

如果您使用的服务器端语言可以轻松地从其中包含 [] 的 ID 构建数组，您可能会考虑 DouweM 的建议。另一种选择是为它们中的每一个分配 ID 的 GUID，或者从您的支持数据库中的关联行中分配它们的主键。

【讨论】：

【解决方案3】：

你不想这样做。您要做的是实际生成一个唯一的 ID，在页面上完全和完全唯一的东西，不要尝试在数据库中维护该 ID。

然后你应该做的是，当页面被提交时，你获取这些提交的 ID，然后使用 auto_increment 让数据库分配 ID。如果您需要复合键，那么您可以使用复合键。

然后当您再次加载表单时，比如说进行编辑，您需要使用数据库中的新 ID。

我使用 AJAX 实现了类似的东西。我为每个表单元素使用了 random.uniqueID('prefix_')，然后在提交时，我将 auto_increment 分配给 prefix_integer 并返回一个 JSON 对象。然后，我可以遍历该对象并确保我的表单是最新的，并具有正确的 ID。

这样解释应该很简单。

【讨论】：

【解决方案4】：

为每个<tr> 赋予唯一的id=... 属性，以便您可以唯一标识行。然后在表中添加一列，其中包含每行的顺序 ID。当您因为行已更改而需要重新排序时，请更新列而不是 id 属性。

【讨论】：