Блог

Главная - Вопросы по программированию - Поиск по ячейкам таблицы

Поиск по ячейкам таблицы

#javascript #jquery #performance #loops

#javascript #jquery #Производительность #циклы

Вопрос:

У меня есть скрытая таблица, которая содержит 1272 строки, а внутри нее 3 столбца с

  1. Название хранилища
  2. Почтовый индекс
  3. Кнопка

Скрипт предназначен для поиска всех td ячеек по названию магазина или почтовому индексу и не возвращает желаемых результатов.

Это ссылка на поиск

Совет приветствуется

 $("#searchterm").on("keyup", function() {
    var value = $.trim($(this).val().toLowerCase());


    $("table#participating_stores tr:gt(0)").each(function(index) {
        if (index !== 0) {
            $row = $(this);
            
            var $tdElement = $row.find("td");
            var id = $.trim($tdElement.text().toLowerCase()) 

            var matchedIndex = id.indexOf(value);
            
            if (matchedIndex != 0) {
                $row.hide();
            }
            else {
                //highlight matching text, passing element and matched text
      
                $row.show();
            }
        }
    });
});

Комментарии:

1. Есть несколько вопросов: 1. find('td') Получает все три ячейки строки, но … 2. Затем следующий trim() id получает текст из всех 3 этих ячеек, и это выглядит примерно так: iga zuccoli832go to survey . 3. Я бы подумал matchedIndex , что следует проверить == -1 (-1 означает, что не найдено ), чтобы скрыть строки, а не 0? … Используйте отладчик браузера для установки точек останова и пошагового выполнения кода javascript, чтобы следить за обработкой.

2. Спасибо, Пол, это было очень полезно, я не был уверен, что означает -1

Ответ №1:

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

 $("#searchterm").on("keyup", function() {
  var value = $(this).val();

  $("table tr:not(:first)").show().filter(function(index) {
      return $(this).find("td").text().indexOf(value) == -1;
  }).hide();
}); 
 table, tr, td, th{
    border: 1px solid black;
    padding: 3px;
}

table th{
    background-color: #dddddd;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr><th>Postal Code</th><th>Store Name</th></tr>
    <tr><td>12345</td><td>store name</td></tr>
    <tr><td>99999</td><td>another store name</td></tr>
    <tr><td>54321</td><td>yet another name</td></tr>
    <tr><td>34343</td><td>4th name</td></tr>
    <tr><td>87898</td><td>fifth name</td></tr>
</table>
<br />
<input type="text" id="searchterm" placeholder="search"></input>

Комментарии:

1. Спасибо за это решение, оно намного быстрее и короче. Я изменил его здесь, чтобы таблица отображалась и скрывалась, и установил таймер для пустой строки, которая в основном работает здесь

Метки: