Клонирование и отображение таблицы - PullRequest
Новая
       9

Клонирование и отображение таблицы

1 голос
/ 15 июня 2011

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

Я не отвечаю за структуры таблиц (довольно странная настройка IMO), но это так: 

<table>
    <tr>
        <td>[THE HEADER COLUMN (as a separate table)]</td>
        <td>[THE TABLE BODY (as a separate table)]</td>
    </tr>
</table>

Поэтому мне нужно отобразить «таблицу столбцов заголовков» на краю экрана, когда пользователь прокрутил это вне поля зрения, и подведем курсор к краю экрана.

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

Как вы думаете, это правильный подход? Есть идеи?

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

1 Ответ

0 голосов
/ 15 июня 2011

Если вы установите фиксированное значение css первой таблицы и оставите его равным 0, тогда оно будет приклеено к левому краю экрана, вам просто нужно будет проверить, что пользователь начал прокручивать после каждого события прокрутки: 

$(window).scroll( function(){ // fired after every scroll event
    if($(window).scrollLeft() > 0){ // check horizontal scroll
        $("#table1").css("position","fixed");
    } else {
        $("#table1").css("position","relative");
    }
});
...