选择HTML表行和标识数据库记录ID

Question

我正在开发一个简单的基于CRUD的应用程序，用于提升技能。

目前，应用程序使用JSTL将选择查询的结果输出到HTML表。该表的最后一列为每条记录都有一个删除链接，用于将参数action=delete&id=1发送到服务器。这些链接的href的id param值部分显然是使用JSTL基于数据库记录键动态生成的，该数据库记录键随数据库结果一起传递到JSP中。

我希望用户“选择”一行并单击表格底部的删除按钮，而不是使用此删除列，这将把上述参数发送到服务器。

我不确定如何实现以下目标：

（1）在Javascript中，如何允许用户“选择”表格行。我不希望桌子有单选按钮。行为应该是用户单击行，整个行颜色更改，JS保留所选行的索引。一次只能选择一行。如果用户再次单击该行，则会取消选择该行，即颜色将返回其原始颜色，JS不再将该行索引标识为突出显示。

（2）如果我没有特定于每个数据库记录的删除链接，如何识别要删除的数据库记录的密钥，并在单击“删除”按钮时将其返回给服务器。例如，当前如果db中的记录的PK为123456，则我的JSTL将为该特定的Delete链接生成href action=delete&id=123456。那么，如何将该id链接到选定的表行而不必在HTML表中实际显示该ID。

Answer 1

1）有很多方法可以做到这一点。我想所有这些都将涉及使用像var rows = document.getElementsByTagName("tr");或其jquery（或其他框架）等效的东西。或者可以使用其他一些选择器，可能是CSS类名。接下来是一个循环，在该循环中取消选择未单击的所有行，并仅选择最近单击的行。更改颜色等于基本上只更改分配给DOM元素的css类。

2）您将使用Javascript将带有隐藏输入（<input type='hidden'.../>）的html表单附加到DOM，然后通过Javascript提交（如果您移动到其他页面并返回，则可以）。或者，您可以使用Javascript向删除servlet发送Ajax请求，然后在收到成功响应时从页面中删除特定的tr。