Прокрутка таблицы с несколькими фиксированными заголовками таблицы

Question

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

<table>
    <thead>
        <tr>
            <td colspan="2"></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <td colspan="2"></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
           <td></td>
           <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Честно говоря, я не пробовал приведенный выше синтаксис, чтобы даже проверить, действителен ли он.Фактическая разметка, которая у меня есть, в настоящее время не использует thead / tbody, а вместо этого прокручивает весь родительский div (см. Ниже).

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

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

Answer 1

Несколько месяцев назад я написал некоторый код, который делал именно то, где я хотел, чтобы заголовки работали аналогично заголовкам разделов на iOS. Используя Jquery, я решил создать решение для прослушивания событий onScroll (и onResize для изменения размера окна), которое провело проверку всех $('table thead') и проверило их $(this).position() на странице.

Проверка состояла в том, была ли позиция thead выше верхней части текущего окна просмотра.

Как только я нашел самый релевантный заголовок (самый нижний thead, который был над окном просмотра), я создал новый table с position: fixed в (0, 0) и скопировал в него новый столбец для каждый столбец строк заголовков и вручную установите его свойства width в соответствии с исходной таблицей.

Я собрал доказательство концепции, которое показывает, как все это работает .

Вот некоторый псевдокод того, как это работает:

1. Проверьте, видима ли таблица
2. Получить список всех thead разделов в таблице
3. Перевернуть список
4. Найти первое thead в массиве с верхней позицией, меньшей scrollTop элемента body
5. Если мы нашли один:
   1. Создание глубокой копии thead
   2. Сделать контейнер для стола
   3. Скопируйте атрибуты из исходной таблицы, чтобы скопировать стили
   4. Установите контейнер на [0, originalTable.left]
   5. Установить ширину, равную outerWidth исходной таблицы
   6. Установите ширину каждого td найденного равным ширине td из исходной таблицы
   7. Добавить его в DOM
6. Если ничего не найдено, удалите существующий контейнер из DOM, если он был

Существуют и другие подробности, которые сделали это еще приятнее:

• Вместо (0, 0) исходная точка для фиксированной строки была изменена в зависимости от того, должна ли ее отталкивать «настоящая» строка заголовка для tbody ниже той, которая имеет фиксированный заголовок.
• Убедитесь, что предыдущие строки заголовка удалены перед созданием новой
• Не пересоздавать строку заголовка, если заголовок, который вы делаете, совпадает с тем, что уже есть

---

Этот подход работал намного лучше других, которые я пробовал, например, пытался position:absolute объект из-за того, что Firefox и IE не очень быстро запускают обработчик onScroll, поэтому вы склонны видеть «дрожание». Я также попытался перебрать атрибут position из thead s, это просто закончилось скачками ширины столбца таблицы и несоответствием данных.

thead узлы строго не требуются для этого решения, так как вы можете использовать другой селектор, чтобы определить, какие строки являются заголовками и т. Д.

---

Обновление : добавлен пример кода и псевдокода