Как выполнить поиск в таблице

Проблема

Мне необходимо выполнить поиск в таблице нужной строки. Как это сделать?

Решение

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

Для выполнения поиска автор написал универсальную функцию jspsSearchSell (листинг 8.2). Формат ее вызова таков:

jspsSearchCell(<Таблица>, <Искомая строка>, <Стилевой класс выделения> [, <Столбцы, в которых будет производиться поиск>]);

Первым параметром функции передается таблица, в которой нужно выполнить поиск, вторым — искомая строка. Третий параметр задает имя стилевого класса, который будет привязан к ячейкам, содержащим Искомую строку, это имя должно быть задано в строковом формате.

Народ советует

Если нужно задать для ячеек таблицы, в которой будет производиться поиск с помощью функции jspsSearchCell, какой-либо стиль, можно использовать комбинированные стили. Например, так может выглядеть стиль для всей таблицы:

.sometable { <Определение стиля> }

А так — стиль для ячеек этой таблицы:

.sometable TD { <Определение стиля> }

После этого мы можем использовать функцию jspsSearchCell со спокойной совестью.

Третий, необязательный, параметр задает список номеров столбцов, в которых должен производиться поиск. Список должен представлять собой массив, содержащий эти номера. Если он пропущен, поиск будет вестись по всем столбцам таблицы.

Функция jspsSearchCell возвращает массив экземпляров объектов, соответствующих найденным ячейкам.

Внимание!

Функция jspsSearchCell выполняет поиск только в секции тела таблицы. Автор посчитал, что в секции "поддона" и уж тем более в секции "шапки" искать смысла не имеет. Также эта функция выполняет поиск только в ячейках, содержащих один лишь текст, без тегов HTML.

Листинг 8.2. Функция jspsSearchCell. выполняющая поиск в таблице

function jspsSearchCell(pTable, pSubstring, pClassName, pColumnNumbers) {

var colujmnNumbers = (pColumnNumbers) ? pColumnNumbers .join (" ") : "";

pSubstring = pSubstring.toLowerCase();

var resultCells = new Array();

var bodySectionObject = pTable.getElementsByTagName("TBODY");

bodySectionObject = bodySectionObject[0];

for (var i = 0; i < bodySectionObject.childNodes.length; i++)

{

var rowObject = bodySectionObject.childNodes[i]; for (var j = 0; j < rowObject.childNodes.length; j++) if ((columnNumbers == "") || (columnNumbers.indexOf(j.toString()) != -1)) { var cellObject = rowObject.childNodes[j]; cellObject.className = "";

var cellText = cellObject.firstChild.nodeValue; if (cellText) { cellText = cellText.toLowerCase(); if (cellText.indexOf(pSubstring) != -1) {

cellObject.className = pClassName; resultCells[resultCells.length] = cellObject; }

> } } return resultCells; }

Кстати, если мы собираемся пользоваться для поиска по таблице функцией jspsSearchCell, нам также пригодится функция jspsClearSearchCell (ЛИСТИНГ 8.3). Она занимается тем, что удаляет со всех ячеек выделение, установленное функцией jspsSearchCell. Формат ее вызова очень прост:

j spsClearSearchCell{<Таблица>);

Единственным параметром этой функции передается таблица, с ячеек которой нужно снять выделение. Значения эта функция не возвращает.

Листинг 8.3. Функция jspsClearSearchCell, снимающая выделение ячеек таблицы, установленное функцией jspsSearchCell

function jspsClearSearchCell(pTable) { var bodySectionObject = pTable.getElementsByTagName("TBODY"); bodySectionObject = bodySectionObject[0];

for (var i = 0; i < bodySectionObject.childNodes.length; i++) { var rowObject = bodySectionObject.childNodes[i]; for (var j = 0; j < rowObject.childNodes.length; j++)

rowObject. childNodes [ j ] . className = "" ; } }

Хорошая идея!

Добавьте объявление этих функций в файл сценариев dynamictable.js, содержащий объявление объекта DynamicTable. Впоследствии, чтобы использовать их, достаточно будет просто подключить к Web-странице этот файл сценариев с помощью тега:

<SCRIPT SRC="dynamictable. js"x/SCRIPT>

Пример

Далее приведен HTML-код страницы, выводящей на экран таблицу с возможностью поиска.

<HTML> <HEAD>

<TITLE>Языки программирования</TITLE>

<SCRIPT SRC="dynamictable.js"></SCRIPT>

<!-- Предполагается, что объявление объекта DynamicTable и функций

jspsSearchCell и jspsClearSearchCell помещено в файл сценария

dynamictable.js -->

<STYLE>

.found { border: thin solid #CCCCCC; } </STYLE> </HEAD> <BQDY>

<DIV ID="tableHolder"x/DIV> <SCRIPT TYPE="text/javascript">

var JSPS_COMPILING = "Компилируемый";

var JSPS_INTERPRETING = "Интерпретируемый";

var tableHead = new Array();

tableHead[0] = new Array("Категория", "Язык");

var tableBody = new Array{);

tableBody[0] = new Array(JSPS_COMPILING, "C++");

tableBody[1] = new Array(JSPS_TNTERPRETING, "JavaScript");

tableBody[2] = new Array(JSPS_COMPILING, "Pascal");

tableBody[3] = new Array(JSPS_COMPILING, "Java");

tableBody[4] = new Array(JSPS_INTERPRETING, "Perl");

tableBody[5] = new Array(JSPS_COMPILING, "Delphi");

tableBody[6] = new Array(JSPS_COMPILING, "Visual Basic");

var tableObject = new DynamicTable(document.all["tableHolder"]);

tableObject.createTable(tableBody, tableHead, null, "Языки программирования");

tableObj ect.showTable();

function searchCell() {

var txtSearchObject = document.all["txtSearch"]; var txtSubstring = txtSearchObj ect. value; if (txtSubstring)

var foundCells = jspsSearchCell(tableObject.table, txtSubstring, "found"); } </SCRIPT> <FORM>

<INPUT TYPE="text" ID="txtSearch">

<INPUT TYPE="button" VALTJE=" Найти" ONCLICK="searchCell();"> <INPUT TYPE="button" VALUE="Убрать выделение" ONCLICK="jspsClearSearchCell(tableObject.table);"> </FORM> </BODY> </HTML>

Народ предупреждает!

В случае таблиц, выводимых постранично, нам придется вызывать функцию jspsSearchCell сразу же после вывода на экран очередной "страницы" таблицы.