2013-07-23 2 views
2

Моя таблица состоит из двух столбцов: имя объекта и объекта. Имя - всего лишь одно слово. Объект может занимать несколько экранов. Я хочу сохранить имя поверх видимой части его ячейки. В этом случае, когда пользователь прокручивает страницу вниз, он может видеть имя объекта, пока объект не будет скрыт. Как я могу это сделать? Есть ли плагины для этого?Как выровнять текст td в верхней части видимой части ячейки?

+1

Вам нужно будет подключиться к событию прокрутки и вычислить положение прокрутки экрана и полностью поместить тег имени. Хотя это не сложно, это не тривиально. Возможно, вам захочется найти «плавающий заголовок таблицы». http://stackoverflow.com/search?q=floating+table+header –

ответ

2

Это всего лишь пара строк jQuery. http://jsfiddle.net/VuRvs/ Прикрепите обработчик к событию прокрутки окна, найдите свой «липкий» заголовок, расположите его на основе текущей позиции прокрутки, убедитесь, что они остаются внутри своего родительского элемента (TD).

$(window).on("scroll", function() { 
    var y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 
    $(".sticky").each(function() { 
     var elm = $(this); 
     var td = elm.parent("td"); 
     var tdTop = td.offset().top; 
     var tdBot = tdTop + td.height() - elm.outerHeight(); 
     if(y <= tdBot && y >= tdTop) { 
      // set a placeholder 
      if(td.children().length == 1) 
       td.append(elm.clone().removeClass("sticky").css("visibility", "hidden")); 
      elm.css("position", "absolute"); 
      elm.css("top", y + "px"); 
     } 
    }); 
}); 
+0

Работает отлично, спасибо. – freopen

+1

@freopen - Это был пример, если вы хотите распечатать эти таблицы, вы столкнетесь с проблемами с абсолютно позиционированием. Если печать станет проблемой, я бы установил 2 класса «липкий» и «ностальгический» держатель места (клонированный элемент) будет иметь класс «notsticky», а в печатном носителе CSS notsticky будет установлен на видимый и липкий, будет установлен отображать: нет –

0

Я не уверен в ваших требованиях. Вы можете посмотреть на это http://tablesorter.com/docs/. Надеюсь, он может вам помочь.

+0

Нет, мне не нужно менять строки. Мне нужно заменить подпись внутри строки так, чтобы ее можно было увидеть с другим положением свитка. – freopen

1

То, что вы описываете, является постоянным заголовком или областью замораживания, такой как Excel.

Отметьте this link, это объясняется nicelly.

Смежные вопросы