Иллюстрированный самоучитель по созданию сайтов › Дополнительные возможности формирования веб-страниц [страница - 145] | Самоучители по работе в Internet

Дополнительные возможности формирования веб-страниц

Фильтрация таблицы

Теперь можно добавить возможность выбора автора из списка и затем отображать на экране книги только выбранного автора. Если в библиотеке очень много книг, такая возможность будет совсем не лишней! Сначала создадим список выбора с помощью тега <SELECT>.

Выберите автора: <SELECT NAME="auth" onChange="auth ()">

<OPTION VALUE="">Все 
    <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();

Вот и все! Давайте теперь посмотрим, что у нас получилось.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  
<HEAD>
    <TITLE>Электронная библиотека</TITLE>
    <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>
    <H1>Художественная литература</H1>Выберите автора: 
    <SELECT NAME="auth" onChange="auth()">
        <OPTION VALUE="">Bce 
            <OPTION VALUE="Дюма">Дюма 
                <OPTION VALUE="Достоевский">Достоевский 
                    <OPTION VALUE="Толстой">Толстой</SELECT>
    <BR>
    <BR>
    <OBJECT ID="hudlit" CLASSID="clsid:333C7BC4-460F-11DO-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>, &laquo;
                <SPAN DATAFLD="Name"> </SPAN>&raquo;, 
                <SPAN DATAFLD="Size"></SPAN>&nbsp;кбайт. 
                <SPAN DATAFLD="File" DATAFORMATAS="html"></SPAN>
            </TD>
        </TR>
    </TABLE>
</BODY>
  
</HTML>

Результат показан на рис. 9.1. На этом рисунке вы можете видеть все назва ния книг, но если пользователь выберет из списка одного из авторов, то в окне браузера отобразятся только книги выбранного автора.

Иллюстрированный самоучитель по созданию сайтов › Дополнительные возможности формирования веб-страниц
Рис. 9.1. Страница, на которой используются данные из базы