Отзывчивый стол - Замена таблицы с Div

Я в настоящее время создаю свою собственную адаптивную таблицу. Я почти там, особенно с небольшой помощью manji. Что мне нужно сделать сейчас, это добавить или заменить div ниже таблицы, когда браузер имеет ширину менее 996 пикселей. Пока у меня есть это

$(window).on("load resize orientationchange", function() {

        var width = $(window).width();

        if (width <= 996){
            $(table).replaceWith(output);
        } else {
            //bring it back
        }
    });

Это работает, когда вы делаете окно браузера меньше, но обвис. не возвращается к нормальному состоянию при изменении размера.

Вы можете посмотреть на ДЕМО ЗДЕСЬ.

Мой вопрос: как я могу заставить это работать правильно, и есть ли лучший способ сделать это?

Источник

3 ответа

Решение

Самый простой способ справиться с этим - создавать контент заранее, а не на лету. Используя ваш подход использования jQuery для рендеринга контента, мы изменили бы его следующим образом:

Во-первых, нам нужно настроить "мобильный" стол, чтобы он имел правильный стиль (в данном случае, без отображения):

output += '<div class="mobiled-table" style="display: none">';

Остальная часть вашей сборки DOM выполняется как обычно, но мы сразу же визуализируем ее, как только закончим писать:

output += '</div>';
var mobile_table = $(output);
$(table).after(mobile_table);

Теперь ваше событие можно скрыть / показать, когда мы отображаем:

$(window).on("load resize orientationchange", function() {
    if ($(window).width() <= 996) {
        mobile_table.show();
        table.hide();
    } else {
        mobile_table.hide();
        table.show();
    }
});

Это означает, что когда происходит реальное событие, очень большие таблицы не требуют времени сборки DOM (что может быть значительным для больших таблиц). Это также означает, что вы можете вытолкнуть DOM-сборку из jQuery (что на самом деле не подходит для него, но, как вы видели, можно сделать это путем конкатенации - просто остерегайтесь, когда в базе данных есть знаки меньше или больше, чем и т. Д.) это) и вместо этого вы можете отобразить мобильную таблицу с тем же кодом, что и немобильная таблица.

Кроме того, вы можете, как указал Джо Фрамбах, полностью переместить этот материал из jQuery в CSS, где он будет быстрее и понятнее:

.mobiled-table { display: none }
@media (max-width: 996px) {
    table { display: none }
    .mobiled-table { display: block !important }
}
Источник

Вы можете сделать это в чистом CSS. Это не будет красиво, но вы можете сделать это.

@media (max-width: 600px) {
  table, thead, tbody, th, tr, td {
    display: block;
  }
}

И это все!

http://codepen.io/anon/pen/qFDvr

Источник

Существует онлайн-инструмент, который позволяет вам конвертировать ваши таблицы в структурированные элементы div всего несколькими щелчками мыши: http://www.html-cleaner.com/

Узнайте больше об этой функции и найдите код CSS, который вы должны использовать здесь: http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/

Источник
Другие вопросы по тегам