我正在开发一个简单的基于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。
答案 0 :(得分:1)
1)有很多方法可以做到这一点。我想所有这些都将涉及使用像var rows = document.getElementsByTagName("tr");
或其jquery(或其他框架)等效的东西。或者可以使用其他一些选择器,可能是CSS类名。接下来是一个循环,在该循环中取消选择未单击的所有行,并仅选择最近单击的行。更改颜色等于基本上只更改分配给DOM元素的css类。
2)您将使用Javascript将带有隐藏输入(<input type='hidden'.../>
)的html表单附加到DOM,然后通过Javascript提交(如果您移动到其他页面并返回,则可以)。或者,您可以使用Javascript向删除servlet发送Ajax请求,然后在收到成功响应时从页面中删除特定的tr
。