Розгортання рядів таблиці за допомогою jquery

Сьогодні дуже цікавий урок, який навчить Вас робити гарний ефект по розгортанню рядів таблиці.

Ця функція допоможе Вам більш компактно групувати дані в таблиці, а також економити місце на сторінці. За допомогою такого плагіна в таблиці може знаходитися більше корисної інформації: картинки, посилання, диаграма і інші елементи.

Розгортання рядів таблиці за допомогою jquery
Розгортання рядів таблиці за допомогою jquery

Для правильної роботи для кожного запису нам необхідно зарезервувати два ряди. Перший ряд буде головним, а другий буде відображати деталі. Ряд з деталями згортається \ розгортається при натисканні на головний ряд.

Розгортання рядів таблиці за допомогою jquery

Як завжди на самому початку виконуємо всі необхідні підключення скриптів: фреймворк і допоміжний скрипт, який робить ефектні можливими.

Тепер створюємо таблицю. як говорилося вище повинен бути один головний ряд, і один допоміжний. У прикладі нижче розглянуто приклад з країною США. Є головний ряд, і допоміжний, в якому знаходяться зображення і посилання на інші ресурси. Дуже важливий момент: допоміжний ряд має параметр colspan = "5". Це важливо.

Для правильної роботи нам також знадобляться наступні стилі:

Їх можна як підключити до сторінці, так і винести в окремий файл.

На мою думку, вийшла дуже цікава таблиця.

Користуйтеся! Всього найкращого!

5 останніх уроків рубрики "jQuery"

Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.

  • jQuery плагін для створення тимчасової шкали.

  • jQuery плагін для створення діаграми Ганта.

  • Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.

    Розгортання рядів таблиці за допомогою jquery

    За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

    Розгортання рядів таблиці за допомогою jquery

    Розгортання рядів таблиці за допомогою jquery

    Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

    Розгортання рядів таблиці за допомогою jquery

    Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

    Розгортання рядів таблиці за допомогою jquery

    Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!

    Схожі статті