11

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

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

$('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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button>Display block</button>

<table class="two-col-table">
<tbody>
<tr>
<td>Условия эксплуатации покрытия</td>
<td>Огнезащита</td>
<td>Антисептик</td>
</tr>

<tr>
<td>Наружные поверхности, не подверженные вымыванию, при переменной влажности и температуре под воздействием солнечного излучения и ветра</td>
<td>5 лет</td>
<td>10 лет</td>
</tr>
 
<tr>
<td>Внутри неотапливаемых жилых и нежилых помещений</td>
<td>16 лет</td>
<td>25 лет</td>
</tr>

<tr>
<td>Наружные поверхности помещений, находящихся в условиях Крайнего Севера</td>
<td>3 лет</td>
<td>5 лет</td>
</tr>

<tr>
<td>Внутренние поверхности закрытых неотапливаемых помещений, находящихся в условиях Крайнего Севера</td>
<td>5 лет</td>
<td>8 лет</td>
</tr>
</tbody>
</table>

Как можно заменить из примера, если задать .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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button>Display block</button>

<table class="two-col-table">
<tbody>
<tr>
<td>Условия эксплуатации покрытия</td>
<td>Огнезащита</td>
<td>Антисептик</td>
</tr>

<tr>
<td><span>Условия эксплуатации покрытия</span> Наружные поверхности, не подверженные вымыванию, при переменной влажности и температуре под воздействием солнечного излучения и ветра</td>
<td><span>Огнезащита</span> 5 лет</td>
<td><span>Антисептик</span> 10 лет</td>
</tr>
 
<tr>
<td><span>Условия эксплуатации покрытия</span> Внутри неотапливаемых жилых и нежилых помещений</td>
<td><span>Огнезащита</span> 16 лет</td>
<td><span>Антисептик</span> 25 лет</td>
</tr>

<tr>
<td><span>Условия эксплуатации покрытия</span> Наружные поверхности помещений, находящихся в условиях Крайнего Севера</td>
<td><span>Огнезащита</span> 3 лет</td>
<td><span>Антисептик</span> 5 лет</td>
</tr>

<tr>
<td><span>Условия эксплуатации покрытия</span> Внутренние поверхности закрытых неотапливаемых помещений, находящихся в условиях Крайнего Севера</td>
<td><span>Огнезащита</span> 5 лет</td>
<td><span>Антисептик</span> 8 лет</td>
</tr>
</tbody>
</table>

Как собрать данные или закинуть в какой-то блок понятно, а вот как пройтись именно в каждой ячейки по нужной колонке?

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

5
  • Как вы таблицу генерируете? Можно на бэкэнде сделать.
    – Alex78191
    30 мая 2017 в 23:38
  • возможно здесь будут какие то способы , которые вам понравятся habrahabr.ru/post/328230
    – SergeyE
    31 мая 2017 в 6:56
  • @Alex78191 в общем-то с таблицами работаю по разному, в некоторых случаях использовал data-title и на телефонах через псевдо-класс выводил все как нужно, но это очень трудозатратный процесс. Хочется максимально упростить, чтоб и через виз-редактор простые пользователи могли работать с таблицами, а на выходе получать удобный вариант отображения. 31 мая 2017 в 9:01
  • @Eikhner некоторыми способами описанными в статье я и так пользовался, но, все же хочется быстрый и просто вариант реализации, не перегруженный скриптами или стилями. С приведенной разметкой в примере можно очень удобно и красиво все оформить. 31 мая 2017 в 9:05
  • @AlexeyGiryayev вставляйте заголовки в ячейки при генерации через php.
    – Alex78191
    31 мая 2017 в 9:08

1 ответ 1

5

$(document).on('click', function() {
  $('tr:not(.first-tr)').each(function() {
    $(this).find('td').each(function() {
      $(this).prepend('<span class="grey-span">' + $('tr.first-tr td').eq($(this).index()).text() + '</span>')
    });
  });
});


$('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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button>Display block</button>

<table class="two-col-table">
<tbody>
<tr class="first-tr">
<td>Условия эксплуатации покрытия</td>
<td>Огнезащита</td>
<td>Антисептик</td>
</tr>

<tr>
<td>Наружные поверхности, не подверженные вымыванию, при переменной влажности и температуре под воздействием солнечного излучения и ветра</td>
<td>5 лет</td>
<td>10 лет</td>
</tr>
 
<tr>
<td>Внутри неотапливаемых жилых и нежилых помещений</td>
<td>16 лет</td>
<td>25 лет</td>
</tr>

<tr>
<td>Наружные поверхности помещений, находящихся в условиях Крайнего Севера</td>
<td>3 лет</td>
<td>5 лет</td>
</tr>

<tr>
<td>Внутренние поверхности закрытых неотапливаемых помещений, находящихся в условиях Крайнего Севера</td>
<td>5 лет</td>
<td>8 лет</td>
</tr>
</tbody>
</table>

Не знаю, как подключить здесь jQuery. Добавил класс .first-tr (но лучше используйте thead и tbody), и добавил класс .grey-span (не отрывайте руки :) ).

Click для примера - здесь любое событие.

$('tr.first-tr td').eq($(this).index()).text() - берем текст с первой tr, которая по индексу такая же, как текущая.

На коленке и по-быстрому, надеюсь, смысл ясен :)

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.