Выбор строк в таблице HTML только с указанным значением? - PullRequest
0 голосов
/ 10 ноября 2010

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

Я закончил с этой частью, но главная проблема в том, что если пользователь вводит пробел в поле, а затем вводит другое значение, тогда js должен фильтровать данные, где присутствуют все слова (текст, разделенный пробелом)хотя бы один раз в любой ячейке строки, как в предложениях Google, но с таблицей.

У кого-нибудь есть решение?

ЗДЕСЬ КОД

for(var i=0; i < trs.length; i++ ) 
{       
    tds = trs[i].getElementsByTagName("td");
    //alert(tds );

    for( var j=0; j < tds.length; j++ )
    {
        if( hasWords )
        {
            for( k = 0; k < searchWords.length; k++ )
            {
                if( searchWords[k].toLowerCase() != "" && tds[j].innerHTML.toLowerCase().search( searchWords[k].toLowerCase() ) == -1 )
                {
                    found = false;
                    //foundRows.push(trs[i]);
                }
                else {
                    found = true;
                    foundRows.push(trs[i]);
                }
            }
        }
        else
        {
            if( searchText != "" && tds[j].innerHTML.toLowerCase().search( searchText.toLowerCase() ) != -1 )
            {
                found = true;
                foundRows.push(trs[i]);
            }
        }           

        /*
        if( tds[j].innerHTML.toLowerCase().search( searchText ) != -1 )
        {
            found = true;
            foundRows.push(trs[i]);
        }
        */
    }
}

Ответы [ 2 ]

3 голосов
/ 10 ноября 2010

Первая возможность

Сделайте то же самое, что вы сделали с одним словом. Разделите ввод пользователя на отдельные слова и протестируйте каждое из них.

Вторая возможность - оптимизированная фильтрация

Обход всей таблицы кажется очень трудоемким, что довольно легко можно было бы оптимизировать с небольшими накладными расходами в начале. Поскольку объекты javascript являются своего рода ассоциативными массивами, вы можете сделать это:

  1. Когда страница загружает таблицу перемещения и анализирует текст каждой ячейки. Синтаксический анализ должен выполняться с использованием регулярных выражений, поскольку это упростит исключение любой пунктуации и аналогичных var rx = /([a-z]+)/gi. Вы также можете легко исключить любые односимвольные слова здесь var rx = /([a-z]{2,})/gi.
  2. Хранить каждое слово в ассоциативном объекте по отношению к строке.
  3. Фильтр по этому объекту.

Как должен выглядеть ваш ассоциативный объект:

var data = {
    "tomorrow": [1, 2, 3],
    "will": [3, 5, 6],
    "be": [78],
    "sunny": [3, 9, 19],
    ...
};

массивы каждого слова соответствуют индексу строки таблицы. Поэтому, когда пользователь вводит любые данные в текстовое поле, вы можете легко разделить их на отдельные слова и получить все массивы:

var filter = $("#search_filter").val().split(" ");
var firstWordRows = data[filter[0]];

Тогда все, что вам нужно сделать, это пересечь эти массивы и спрятать все строки, кроме полученных.

Хорошо, что вы можете определить стоп слов, которые вы не фильтруете (например, in, a, of, at, etc.) ...

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

Предложение

Я настоятельно рекомендую вам использовать библиотеку Javascript, которая сделает вашу жизнь намного проще. Например, используйте jQuery, у которого нет длинной кривой обучения и который очень хорошо работает вместе с имеющимися у вас скриптами.

0 голосов
/ 10 ноября 2010

Если вы уже работали с одним словом, просто разбейте ввод на пробелы (input.split(" ")), а затем выполните фильтрацию таким же образом, за исключением проверки каждого слова.используя библиотеку JS, хотя, конечно, было бы проще.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...