Як зробити рядок таблиці посиланням

У цій статті я покажу, як можна за допомогою jQuery зробити рядок таблиці повністю клікабельно (посиланням).

Репутація таблиць серед розробників далека від ідеальної, проте, існує маса ситуацій, коли вид виведеної інформації робить необхідним їх використання. Адже, нагадаю, сенс семантики полягає в використанні для подання правильних тегів, наприклад, до заголовку слід застосовувати тег h1 (h2. H3 і т. Д.), Таблиці обрамляти тегом table.

Найпоширеніший підхід до табличній інформації - це наявність колонки, за допомогою якої користувач може провести ряд дій з рядком (редагувати, видалити і т. Д.). Для користувача роботу з таблицею можна спростити, зробивши кожен рядок клікабельно, або, інакше кажучи, зробити рядок таблиці посиланням.

Існує кілька способів зробити рядки розмітки. Опишемо, як це можна зробити за допомогою jQuery. Почнемо з розмітки:

Тепер, щоб зробити рядок повністю клікабельно (не вставлено при цьому в кожну клітинку тег a), в атрибут рядки data-href додамо URL тієї сторінки, на яку перейде користувач при кліці по рядку. Нова розмітка буде виглядати так:

У наведеному вище коді кожному рядку доданий клас clickable. таким чином, при необхідності дизайн рядків-посилань можна міняти. Тепер, клікнувши по рядку, відбудеться перехід на нову сторінку.

Тепер, коли курсор знаходиться над посиланням, кликабельность «включається» і при кліці відбувається бажаний ефект. Коли ж курсор залишає посилання, вона «вимикається». Демо, де показано, як все це працює, нижче.