JSP: Select HTML Table Row and Identify DB Record ID

SimonTemplar

I’m developing a simple CRUD based JSP web application for upskilling purposes.


Currently, the application outputs the result of a select query to a HTML table using JSTL. The last column of this table has a Delete link for each record which sends the parameters action=delete&id=1 to the server. The id param value part of the href of these links are obviously dynamically generated with JSTL based on the database record key that is passed into the JSP with the database results.


Instead of having this Delete column, I want the user to “select” a row and click a Delete button at the bottom of the table, which will send the above parameters to the server.


I am unsure how to accomplish the following to achieve this:


(1) In Javascript, how can I allow the user to “select” a table row. I don’t want the table to have radio buttons. The behaviour should be that the user clicks the row, the entire row colour changes and JS retains the index of the selected row. Only one row can be selected at a time. If the user clicks the row again, it becomes deselected, i.e. the colour is returned to its original colour and JS no longer identifies that row index as being highlighted.


(2) If I don’t have a Delete link specific to each db record, how can I identify the key of the db record to be deleted and return this to the server when the Delete button is clicked. For example, currently if the record in the db has an PK of 123456, my JSTL will generate a href action=delete&id=123456 for that specific Delete link. So, how can I link that id to the selected table row without having to actually display that id in the HTML table.

oscarBravo

Just thinking out loud: if I were doing something like that, I'd toggle a class on the row to indicate whether or not it was selected. When the "delete" button is pressed, use an AJAX method to POST a request, assembling the list of IDs to delete from the rows that have the "selected" class. You could store the primary key as a data attribute, something like <tr data-rowid="123456">.

SimonTemplar

Thanks oscarBravo. I didn't actually know about the data attribute but it seems exactly what I need.

In WinForms .NET, I would have used displaymember and valuemember properties where the former is displayed to the user and the latter is the corresponding db record id. I was looking for an equivalent in web technologies. I could use the data attribute as the row's "valuemember"

oscarBravo

The data-* attribute is new in HTML5. It's ignored by the browser when rendering, but is semantically valid HTML5 and makes for a handy way to attach any number of arbitrary data values to any HTML element. It's pretty handy