@alexalexes

Как ограничить поиск по содержимому на странице?

Пример верстки для обозначения сути вопроса:
spoiler
<style>
      html, body
      {
        margin: 0;
        padding: 0;
      }
      table
      {
        border-collapse: collapse;
        background-color: #fff;
      }
      table,
      table td,
      table th
      {
        border: 1px solid #333;
      }
      div.table_container>div.fixed_table_container
      {
        position: fixed;
        overflow: hidden;
        top: 0;
        height: 44px; /* это значение устанавливается программно, равно высоте thead ориг. таблицы */
        width: 100%;
      }
    </style>
    <div class="table_container">
  <table id="t1" class="example_table"> <!-- Оригинальная таблица -->
    <thead>
      <tr><th colspan="4">Заголовок</th></tr>
      <tr><th>Колонка</th><th>Колонка</th><th>Колонка</th></tr>
    </thead>
    <tbody>
      <tr><td>Данные</td><td>Данные_два</td><td>Еще_данные_три</td></tr>
    </tbody>
  </table>
  <div class="fixed_table_container"> <!-- Контейнер для отображения видимой части фикс. таблицы -->
    <table id="t2" class="example_table"> <!-- Фиксированная таблица (клон оригинальной) -->
      <thead> <!-- Видимый заголовок -->
        <tr><th colspan="3">Заголовок</th></tr>
        <tr><th>Колонка</th><th>Колонка</th><th>Колонка</th></tr>
      </thead>
      <tbody> <!-- Тело фикс. таблицы за пределами видимой части контейнера fixed_table_container -->
        <tr><td>Данные</td><td>Данные_два</td><td>Еще_данные_три</td></tr>
      </tbody>
    </table>
  </div>


Есть таблица t1, для которой с помощью спец. библиотеки (для упрощения в примере не задействована) создается фиксируемая шапка при помощи таблицы t2 (при прокручивании очень длинных таблиц), находящаяся в контейнере fixed_table_container. Контейнер fixed_table_container предназначен для ограничения видимой области таблицы t2, видимая область, ее размер и положение вычисляется программно.
Таблица t2 является полной копией таблицы t1, в том числе по стилям.
Элемент thead таблицы t2 служит для отображения фикс. заголовка.
Элемент tbody таблицы t2 служит для выравнивания ширины у колонок по контенту.

Вопрос:
Как ограничить поиск по содержимому на странице, доступный в браузере по Ctrl+F, для содержимого таблицы t2?

Так как содержимое таблиц продублировано, поиск дает удвоенное значение результатов. Когда пользователь начинает проходить каждый результат, то он неизбежно выходит на содержимое таблицы t2, которое в Chrome - можно шагать по скрытой части, результат - не виден, а в IE становится виден вспомогательный tbody таблицы t2. (В Firefox - нет проблем)

При разработке модуля фиксирования шапки рассматривался вариант отказаться от дублирования tbody таблицы t2, но зафиксировать размеры всех ячеек th в t2 один к одному как у таблицы t1 - нереально. Для этого нужно использовать свойство table-layout: fixed, однако, в браузере Firefox при группировке строк и/или столбцов заголовков с помощью атрибутов rowspan и/или colspan в thead, свободные от группировки ячейки не подчиняются заданным через свойства размерам (На примере: сгруппированная ячейка - "Заголовок", негруппированные ячейки, на которых нельзя задать размер - "Колонка").
  • Вопрос задан
  • 56 просмотров
Пригласить эксперта
Ответы на вопрос 1
@mickvav
Programmer, system and network administrator
А чем вам jquery плагин tablescroller не угодил?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы