Фильтрация таблицы
Фильтрация таблицы
Теперь можно добавить возможность выбора автора из списка и затем ото- бражать на экране книги только выбранного автора. Если в библиотеке очень много книг, такая возможность будет совсем не лишней! Сначала создадим список выбора с помощью тега <SELECT>.
Выберите автора: <SELECT NAME="auth" onChange="auth ()">
<OPTION VALUE="">Bce
<OPTION VALUE="Дюма">Дюма
<OPTION VALUE="Достоевский">Достоевский
<OPTION VALUE="Толстой">Толстой </SELECT>
Поскольку при выборе какого-либо из пунктов списка содержимое акии броузера должно изменяться, применим обработчик событий onChange (напомним, что он реагирует на изменения значения). Пусть он вызывает еще не написанную функцию auth(), которая будет выводить на экран книги только выбранного автора. Для облегчения написания этой функпии мы продублировали названия пунктов списка в атрибуте VALUE= каждого из тегов <OPTION>.
Теперь напишем эту функцию. Это проще, чем может показаться. Дело в том, что у нашего элемента управления есть свойство Filter, значением кото-рого может являться строка типа название поля=строка, то есть сравнение одного из полей с заданной строкой. В данном случае это может быть, например: Auther=Дюма.
Поскольку имя автора у нас уже хранится как значение атрибута VALUE= , мы можем написать так:
hudlit.Filter="Author="+document.all.auth.value;
Кстати, в качестве значения атрибута VALUE= первого элемента списка (“Все”) мы не зря использовали пустую строку. Сравнение с ней в любом случае даст положительный результат, поэтому она как бы отменяет фильтр. Теперь остается только перерисовать изображения с помощью метода Reset:
hudlit.Reset () ; Вот и все1 Давайте теперь посмотрим, что у нас получилось.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Электронная библиотека</ТITLЕ>
<STYLE> BODY { background-color: #F4FFEF; color: #182F1A;
font-family: sans-serif;
font-size: 120%; } </STYLE>
<SCRIPT> function auth() { hudlit.Filter="Author="+document.all.auth.value ; hudlit.Reset () ; } </SCRIPT>
</HEAD>
<BODY>
<Н1>Художественная литература</Н1> Выберите автора:
<SELECT NAME="auth" onChange="auth()">
<OPTION VALUE="">Bce <OPTION VALUE="Дюма">Дюма
<OPTION VALUE="Достоевский">Достоевский
<OPTION VALUE="Толстой">Толстой </SELECT> <BR><BR>
<OBJECT ID = "hudlit" CLASSID = "clsid:333C7BC4-460F-llDO-BC04-0080C7055A83" BORDER="0" WIDTH="0" HEIGHT="0">
<PARAM NAME = "DataURL" VALUE = "books.txt">
<PARAM NAME = "UseHeader" VALUE = "True"> </OBJECT>
<TABLE DATASRC = "#hudlit"> <TR>
<TD><SPAN DATAFLD="Author"></SPAN>, «
<SPAN DATAFLD="Name"> </SPAN>»,
<SPAN DATAFLD="Size"></SPAN> кбайт.
<SPAN DATAFLD="File" DATAFORMATAS="html"></SPAN></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Результат показан на Рисунок 9.1. На этом рисунке вы можете видеть все назва ния книг, но если пользователь выберет из списка одного из авторов, то в окне броузера отобразятся только книги выбранного автора.
Теперь можно несколько усложнить задачу. Пусть пользователь имеет возможность не только выбирать автора, но и вводить название книги
