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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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