Страницы

Поиск по вопросам

воскресенье, 1 декабря 2019 г.

Адаптивная таблица

#javascript #jquery


Задача - немного упростить процесс работы с таблицами на мобильных устройствах. Простым
превращением таблицы в блок не обойтись, так как при наличии нескольких колонок будет
невозможным разобрать где какие значения отображаются.

Пример таблицы:



$('button').click(function() {
    $('.two-col-table td').css("display", 'block');
});
.two-col-table {
 width: 100%;
 margin: 30px 0;
 background: #fefefe;
 border-radius: 4px;
 border-collapse: collapse;
 font-size: .9em;
}
.two-col-table td {
 border: 1px solid #ccc;
 padding: 10px 12px;
}
.two-col-table td p {
 margin: 0;
}



Условия эксплуатации покрытия Огнезащита Антисептик
Наружные поверхности, не подверженные вымыванию, при переменной влажности и температуре под воздействием солнечного излучения и ветра 5 лет 10 лет
Внутри неотапливаемых жилых и нежилых помещений 16 лет 25 лет
Наружные поверхности помещений, находящихся в условиях Крайнего Севера 3 лет 5 лет
Внутренние поверхности закрытых неотапливаемых помещений, находящихся в условиях Крайнего Севера 5 лет 8 лет
Как можно заменить из примера, если задать .two-col-table td {display:block} все ячейки перекинутся на новую строку и будет непонятно, какие данные видит пользователь, так как заголовка вверху таблицы не будет. Вопрос следующий, как можно раскидать заголовок по строкам таблицы? Чтоб по итогу получить вот такой вид: $('button').click(function() { $('.two-col-table td').css("display", 'block'); }); .two-col-table { width: 100%; margin: 30px 0; background: #fefefe; border-radius: 4px; border-collapse: collapse; font-size: .9em; } .two-col-table td { border: 1px solid #ccc; padding: 10px 12px; } .two-col-table td p { margin: 0; } .two-col-table span { display: block; color: grey } .two-col-table tr:first-child { display: none; }
Условия эксплуатации покрытия Огнезащита Антисептик
Условия эксплуатации покрытия Наружные поверхности, не подверженные вымыванию, при переменной влажности и температуре под воздействием солнечного излучения и ветра Огнезащита 5 лет Антисептик 10 лет
Условия эксплуатации покрытия Внутри неотапливаемых жилых и нежилых помещений Огнезащита 16 лет Антисептик 25 лет
Условия эксплуатации покрытия Наружные поверхности помещений, находящихся в условиях Крайнего Севера Огнезащита 3 лет Антисептик 5 лет
Условия эксплуатации покрытия Внутренние поверхности закрытых неотапливаемых помещений, находящихся в условиях Крайнего Севера Огнезащита 5 лет Антисептик 8 лет
Как собрать данные или закинуть в какой-то блок понятно, а вот как пройтись именно в каждой ячейки по нужной колонке? Возможно есть лучшие решения и кто-то поделится способом борьбы с таблицами на мобильных устройствах, кроме замены их на изображения или оборачивания в блок с прокруткой внутренней, чтоб было удобно пользовании и в отображении.


Ответы

Ответ 1



$(document).on('click', function() { $('tr:not(.first-tr)').each(function() { $(this).find('td').each(function() { $(this).prepend('' + $('tr.first-tr td').eq($(this).index()).text() + '') }); }); }); $('button').click(function() { $('.two-col-table td').css("display", 'block'); }); .two-col-table { width: 100%; margin: 30px 0; background: #fefefe; border-radius: 4px; border-collapse: collapse; font-size: .9em; } .two-col-table td { border: 1px solid #ccc; padding: 10px 12px; } .two-col-table td p { margin: 0; } .grey-span { display: block; color: grey; }
Условия эксплуатации покрытия Огнезащита Антисептик
Наружные поверхности, не подверженные вымыванию, при переменной влажности и температуре под воздействием солнечного излучения и ветра 5 лет 10 лет
Внутри неотапливаемых жилых и нежилых помещений 16 лет 25 лет
Наружные поверхности помещений, находящихся в условиях Крайнего Севера 3 лет 5 лет
Внутренние поверхности закрытых неотапливаемых помещений, находящихся в условиях Крайнего Севера 5 лет 8 лет
Не знаю, как подключить здесь jQuery. Добавил класс .first-tr (но лучше используйте thead и tbody), и добавил класс .grey-span (не отрывайте руки :) ). Click для примера - здесь любое событие. $('tr.first-tr td').eq($(this).index()).text() - берем текст с первой tr, которая по индексу такая же, как текущая. На коленке и по-быстрому, надеюсь, смысл ясен :)

Комментариев нет:

Отправить комментарий