动态HTML表行添加并填充并插入到数据库中

Question

我需要一个解决方案，实现添加动态HTML表行并用细节填充它们，然后应该在提交时将行添加到数据库中。在jsp中实现这个的最好方法是什么。加载的jsp页面从数据库中获取数据并创建行，我可以编辑行值并且应该更新，也可以在前端页面插入新行，应该与更新的行（从数据库中检索）一起保存在jsp中。

Answer 1

1. 将数据存储在具有一个额外列的javascript多维Array对象中。例如，如果表是2x2，则创建一个大小为2x3的动态arrray（new Array（2,3））

2. 使用数组每一行的第一个单元格来存储表格中每行数据的主键，以及行的其余单元格，以存储html表格中的实际数据。

3. 将新行添加到html表或更新任何数据时，相应地更新此javascript数组。将新创建的行的第一列留空以指示新行（或使用虚拟值填充它以指示空行）

4. 将数组中的数据提交给服务器代码，在单击提交按钮时对其进行处理。这可以通过多种方式完成（附加到查询字符串，创建隐藏变量等）。

服务器端的

5. 处理此数据 - 更新具有主键的记录，并为没有密钥的记录创建新记录。

Answer 2

1. 客户端javascript。功能包括添加行，删除行，向上移动行，根据需要向下移动行。 Elsewhere on SO
2. 记住命名唯一添加的控件，如name1，name2，name3 ...可选择存储一些隐藏字段中的行数，这些字段会随表单一起更新和提交。
服务器端的
3. 使用该计数器或以其他方式循环遍历所有请求变量以查找名称*，并在循环中将名称*，年龄*，性别*等插入数据库。

Answer 3

除非要求允许用户一次性对整个表进行POST并完成它（“保存所有更改并关闭”操作），我建议您只需随时更新数据库（ “ajaxy”方式）： 1.在添加行或编辑行时，立即使用异步javascript调用将行内容发送到服务器以“更新单行” - 这应该相当容易处理（请参阅下面的示例）。 2.当要添加新行时，服务器应返回要存储的客户端的新行ID，以便将来的更新可以解决该行。

实现“保存并关闭”并不完全与此方法相矛盾：您可以让“保存并关闭”操作等到所有挂起的更新都提交 - 在开始发送请求时计数增加，并且收到回复时减少。当它变为零时，你的“保存”部分已经完成，你可以关闭编辑器。

实现此目的的一种方法是将表单附加到每行中的不可见单元格。此表单将为行上的每个数据项都有一个隐藏的输入元素。当用户更改行上的值时，将该行标记为“脏”并且每行的短暂超时（每当用户编辑同一行时重置）将导致将表单提交给iframe。如果要实现“保存并关闭”操作，只需计算脏行。