Выберите строку таблицы HTML и определите идентификатор записи в БД

Question

Выберите строку таблицы HTML и определите идентификатор записи в БД

0

Im разрабатывает простое приложение на основе CRUD для повышения квалификации.

В настоящее время приложение выводит результат запроса выбора в таблицу HTML с использованием JSTL. В последнем столбце этой таблицы есть ссылка Удалить для каждой записи, которая отправляет на сервер параметры action=delete&id=1. Часть значения параметра id из href этих ссылок, очевидно, динамически генерируется с помощью JSTL на основе ключа записи базы данных, который передается в JSP с результатами базы данных.

Вместо того, чтобы иметь этот столбец "Удалить", я хочу, чтобы пользователь "выбирал" строку и нажимал кнопку "Удалить" в нижней части таблицы, которая отправляет вышеуказанные параметры на сервер.

Я не уверен, как добиться следующего:

(1) В Javascript, как я могу позволить пользователю "выбрать" строку таблицы. Я не хочу, чтобы в таблице были переключатели. Поведение должно состоять в том, что пользователь щелкает по строке, изменяется весь цвет строки, а JS сохраняет индекс выбранной строки. За один раз можно выбрать только одну строку. Если пользователь снова нажимает на строку, она отменяется, т.е. Цвет возвращается к исходному цвету, и JS больше не идентифицирует этот индекс строки как выделенный.

(2) Если у меня нет ссылки на удаление для каждой записи db, как я могу определить ключ удаляемой записи db и вернуть ее на сервер при нажатии кнопки "Удалить". Например, если в записи в db есть PK из 123456, мой JSTL будет генерировать href action=delete&id=123456 для этой конкретной ссылки Delete. Итак, как я могу связать этот идентификатор с выбранной строкой таблицы без фактического отображения этого идентификатора в таблице HTML.

John Steed 16 апр. 2014, в 19:05

Источник

0

Извините за подробный вопрос, и я знаю, что этот вопрос охватывает несколько технологий и имеет две разные (но взаимосвязанные части), поэтому я надеюсь, что он соответствует руководящим принципам вопроса.
John Steed 16 апр. 2014, в 16:33

Теги:

javascript

html

jsp

jstl

1 ответ

Ещё вопросы

Извините за подробный вопрос, и я знаю, что этот вопрос охватывает несколько технологий и имеет две разные (но взаимосвязанные части), поэтому я надеюсь, что он соответствует руководящим принципам вопроса.

developerwjk · Accepted Answer · 2014-04-16T16-12-00.000Z

1) Есть много способов сделать это. Я полагаю, что все они будут включать использование чего-то типа var rows = document.getElementsByTagName("tr"); или его эквивалент jQuery (или другой структуры). Или какой-нибудь другой селектор, возможно, имя класса CSS. Далее следует цикл, в котором вы снимаете выделение со всех строк, которые не были нажаты, и выберите только тот, который был недавно нажат. Изменение цвета означает просто изменение класса css, назначенного на элемент DOM.

2) Вы будете использовать Javascript либо для добавления в DOM html-формы со скрытыми вводами (<input type='hidden'.../>), а затем отправить его через Javascript (если вы согласны с переходом на другую страницу и назад). Или вы можете использовать Javascript для отправки запроса Ajax на сервлет delete, а затем удалить конкретный tr со страницы, когда вы получите ответ успеха.

Благодарю. Могу ли я не использовать атрибут данных в TR каждой строки для хранения идентификатора записи? Есть ли недостатки этого подхода?
Использование пользовательских атрибутов приведет к сбою вашей страницы в валидаторе. Но вы можете использовать <input type='hidden'... /> внизу.
Благодарю. Я просто немного озадачен тем, где разместить такой скрытый вход. Предполагая, что идентификатор записи равен 123456, куда вы поместите этот скрытый ввод в следующую разметку строки: <TR> <TD> Java </ TD> <TD> Язык программирования </ TD> <TD> Oracle </ TD> </ TR>
На самом деле, я думаю, я бы просто сделал <tr id='row_1' onClick='doThing(this.id);'>...</tr> и в своем JavaScript я бы убрал 'row_' всякий раз, когда я просто хотел номер.