SELECT-таблицы: битва с браузерами продолжается

19.08.2012

Для создания вертикальных линий, делящих строку на ячейки, предлагалось использовать элемент формы <SELECT>. Этот элемент неплохо смотрится в браузерах, за исключением браузера Chrome, в котором нельзя стилем overflow:hidden отключить отображение полосы прокрутки. Поэтому в качестве разделителя практичнее использовать элемент формы Text (<input type=”text”>), поигравшись с его шириной, рамкой и заливкой.

Для выравнивания колонок использовался моноширинный шрифт, заданный в пикселях. Браузеры FireFox, Chrome и Opera неплохо справились с заданием, а вот IE 9 со шрифтом начал чудить. Выяснилось, что в IE 9 встроена неотключаемая функция Clear Type, которая призвана улучшить качество и точность отображения шрифтов. Можно скачать некую заплатку, но нетрудно догадаться, что посетители Интернет-магазина не будут заморачиваться с этим. Поэтому пришлось задать размер в относительных единицах pt, чтобы и в IE шрифт отображался адекватно. Лиса, Хром и Опера тоже выдали перл. Эти браузеры нагло заменяют несколько стоящих подряд пробелов в строке одним! То есть, вместо строки: ”Много пробелов”, в списке отобразится строка ”Много пробелов”, что нарушает работу всего механизма позиционирования данных при помощи пробельных символов одинаковой ширины. Я хочу сделать в строке несколько пробелов, а браузеры без моего желания исправляют ”ошибку”. Интересная логика. Спасибо, но позвольте уж мне решать, сколько пробелов я хочу вставить в строку. Выходом из этой странной ситуации является использование непрерывного пробела -  . Это значит, что строки в список нужно вставлять через свойство объекта innerHTML, чтобы   при выводе строки превратился в обычный пробел. Для вставки в список SELECT новой строки можно использовать конструкцию вида:

document.getElementById(…).innerHTML=’<option>…</option>’;

, но Эксплорер 9 не понимает её.

Можно динамически создать весь список:

document.getElementById(…).innerHTML=’<select><option>…</option></select>’;

, но Эксплорер 9 выдаёт сообщение о какой-то неизвестной ошибке, что просто убило.

Разбираться долго не хотелось, поэтому просто поставил заплатку: если браузер – Эксплорер, то создаём новый объект строки и используем обычные пробелы, если почти нормальные браузеры, то используем непрерывный пробел ( ).

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

При просмотре информации пользователи могут изменять размеры окна браузера, и неплохо было бы придумать механизм изменения размеров SELECT-таблицы и ширины её ячеек в зависимости от этого. Подгон таблицы по высоте реализуется просто, а вот с шириной нужно подумать. На практике чаще всего резиновой делают только ячейку с названием товара, а остальные ячейки можно сделать фиксированной ширины.

Недостатком моноширинного шрифта является то, что его символы занимают много места. Можно попробовать использовать шрифты с переменной шириной символов, но тогда придётся вычислять размеры строки в пикселях и позиционировать её в пикселях. Алгоритм может быть таким:
Создаётся невидимый элемент <span>, в который посимвольно вводится строка. При помощи свойства offsetWidth вычисляется длина строки. Если значение длины больше заданного, то последний символ из строки удаляется. Далее в строку добавляются символы пробела. Если длина получившейся строки больше заданного значения, то последний пробельный символ удаляется и в его позицию вводится строка следующей ячейки.

Практический пример использования SELECT-таблицы можно посмотреть здесь. Информация из базы данных загружается в таблицу целиком, что требует некоторого времени. Зато потом поиск и перемещение по записям происходят без обращения к серверу. Пример нужно доводить, но уже работает инкрементный поиск по всей строке и по началу (если первый символ заглавный А-Я), перемещение по таблице, просмотр фотографии и описания.

Оглавление ←→