javascript - 如何在维护顺序元素 ID 的同时添加和删除表行?

标签 javascript html dom html-table

我正在开发我一直从事的 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?

最佳答案

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

(我知道 PHP 会自动执行此操作:将以 name 结尾的输入 [] 转换为数组。不知道其他语言)

关于javascript - 如何在维护顺序元素 ID 的同时添加和删除表行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2268281/

相关文章:

javascript - HTML 中的 "Soft link"元素

javascript - 如何将 x->n y->n 对象顺时针旋转 90°?

javascript - html:悬停表格列

javascript - 生成动态画廊jquery

javascript - 自动制作 bootstrap 垂直导航丸

html - 雅虎邮件客户端删除了 anchor 标记中的 href

html - 如何通过编码在 Internet Explorer 中启用兼容性 View

javascript - 向表格行添加 onclick 事件

javascript - 如何在网页上启用/禁用(实时)javascript 插件?

javascript - firestore onSnapshot 更新值,但不更新 VueJS 中的 DOM