wyszukiwanie w tabeli html

Mam duży stół z prawie 5000 rzędów. Korzystam z poniższego fragmentu jquery, aby wyszukać tę tabelę dla określonego tekstu.wyszukiwanie w tabeli html

function searchTable(inputVal) { 

    var table = $('.table'); 

    table.find('tr').each(function(index, row) { 
     var allCells = $(row).find('td'); 

     if(allCells.length > 0) { 
      var found = false; 
      allCells.each(function(index, td) { 
       var regExp = new RegExp(inputVal, 'i'); 
       if(regExp.test($(td).text())) { 
        found = true; 
        return false; 
       } 
      }); 

      if(found == true) { 
       $(row).show(); 
      } else { 
       $(row).hide(); 
      } 
     } 
    }); 
}

Ten skrypt wymaga trochę czasu, aby wykonać, ponieważ pętle przechodzą przez każdą komórkę każdego wiersza. Biorąc pod uwagę tabelę zawierającą 6 komórek z rzędu, całkowita liczba iteracji wynosi prawie 6 * 5000 = 30000!
Czy są jakieś sugestie dotyczące optymalizacji tego fragmentu kodu?

Źródło

2013-03-15 Sudipta Roy

ruch 'var regexp = new RegExp (inputVal, 'I');' 'się obok var table' – ahren

dzięki ... Doceniam to –

Czy 'inputVal' jest naprawdę wyrażeniem regularnym? Jeśli jest to tylko ciąg tekstu, znacznie szybciej byłoby użyć funkcji wyszukiwania ciągów. – JJJ

Sprawdź następujące kody wydajność z Ciebie:

Kod: (z wyłączeniem jquery.js)

<!DOCTYPE> 
<html> 
<head> 
    <script src="jquery.js"></script> 
    <script type="text/javascript"> 
    function searchTable(inputVal) { 
     $('.table').html($('.table').html().replace(RegExp(inputVal, 'g'), '<span class="showthis">' + inputVal + '<span>')); 
     $("tr").css('display', 'none'); 
     $(".showthis").parent().parent().css('display', ''); 
    } 
    </script> 
</head> 
<body> 
    <input id="Button1" type="button" value="button" onclick="searchTable('Text');" /> 
    <table id="tab" class="table" border="1"> 
     <tr> 
      <td> 
       Text 
      </td> 
      <td> 
       A 
      </td> 
     </tr> 
     <tr> 
      <td> 
       C 
      </td> 
      <td> 
       Text 
      </td> 
      <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> ER 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       Text 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       Text 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       Text 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       Text 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       Text 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       Text 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       I 
      </td> 
      <td> 
       H 
      </td> 
     </tr> 
     <tr> 
      <td> 
       E 
      </td> 
      <td> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       G 
      </td> 
      <td> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

Źródło

2013-03-15 11:08:28

też mógł tworzyć niestandardowe rozszerzenia jak:

// jQuery expression for case-insensitive filter 
$.extend($.expr[":"], 
{ 
    "contains-ci": function(elem, i, match, array) 
    { 
     return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0; 
    } 
});

I użyj go tak:

$("#table tbody>tr").hide(); // hides all tr 
$("#table td:contains-ci('" + value + "')").parent("tr").show(); // show tr that containt value

Oto uruchomiony przykład: http://jsfiddle.net/QvU67/

Źródło

2013-03-15 11:21:59

Przede wszystkim chciałbym podkreślić, że przeszukując 5000 wierszy, które nie powinny być ciężkie. Chciałbym również przyjrzeć się innym działającym jednocześnie, które mogą mieć wpływ na wydajność.

Nie gwarantuję również, że poniższe rozwiązanie jest optymalne, ale z testów, które przeprowadziłem, widzę około 50% wzrostu prędkości. Nadal staram się zoptymalizować ten kod tutaj, będę go aktualizował, gdy będę kontynuował. Planuję również wykonać asertywne testy od jsprefa w dzień lub dwa.

moje podejście

JavaScript ojczystym for jest szybszy niż jQuery $(object).each();
DOM ruchu jest o wiele szybciej z ID.

jQuery's .html() używa javascriptowej innerHTML pod maską. Jeśli możesz go użyć bezpośrednio, zwiększy to wydajność.

$(function() { 

var searchTest = new function() { 

    this.tableScope = $("#MyTable"); 

    this.searchTable = function() { 
     var start = new Date().getTime(); 
     this.tableScope.find("tr").hide(); 
     var matches = 0; 
     var searchPattern = new RegExp("abc");// /A/gi; 
     var all_TD = document.getElementById("MyTable").getElementsByTagName("td"); 

     for (var i = 0; i < all_TD.length; i++) { 
      if (searchPattern.test(all_TD[i].innerHTML)) { 
       all_TD[i].parentNode.style.display = ''; 
       i += i % 5; 
       matches++; 
      } 
     } 
     var end = new Date().getTime(); 

     $("#MyMethodClock").text(end - start + " ms to search; Matches found " + matches + " out of 5000 records"); 
    }; 



} 

searchTest.searchTable(); 
});

Oto działający jsFiddle

Źródło

2013-03-16 09:03:59

wyszukiwanie w tabeli html

Odpowiedz

Powiązane problemy