ricerca nella tabella html

Ho un grande tavolo con quasi 5000 righe. Sto usando il seguente snippet jquery per cercare in questa tabella un particolare testo.ricerca nella tabella 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(); 
      } 
     } 
    }); 
}

Ora questo script impiega un po 'di tempo per essere eseguito perché scorre in ogni cella di ogni riga. Considerando che la tabella ha 6 celle di fila, il numero totale di iterazioni è quasi uguale a 6 * 5000 = 30000!
C'è qualche suggerimento per ottimizzare questo snippet?

fonte

2013-03-15 Sudipta Roy

mossa di lavoro 'var = new RegExp RegExp (InputVal, 'i');' fuori a lato 'var table' – ahren

grazie ... lo apprezzo –

'InputVal' è davvero un'espressione regolare? Se si tratta solo di una stringa di testo, sarebbe molto più veloce utilizzare le funzioni di ricerca delle stringhe. – JJJ

Controllare le seguenti prestazioni codici con la vostra:

Codice: (esclusi 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>

fonte

2013-03-15 11:08:28

È inoltre possibile creare un'estensione personalizzata come:

// 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; 
    } 
});

E usalo così:

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

Ecco un esempio di esecuzione: http://jsfiddle.net/QvU67/

fonte

2013-03-15 11:21:59

Prima di tutto vorrei sottolineare che la ricerca attraverso 5000 righe non dovrebbe essere così pesante. Vorrei anche esaminare altre cose in esecuzione contemporaneamente che potrebbero avere un impatto con le prestazioni.

Anche io non garantisco che, la soluzione sotto è ottimale ma dai test che ho condotto posso vedere circa il 50% di aumento della velocità. Sto ancora cercando di ottimizzare questo codice qui, continuerò ad aggiornarlo mentre procedo. Ho anche intenzione di fare test assertivi da jspref in un giorno o due.

mio approccio

Javascript del nativo for è più veloce di quella di jQuery $(object).each();
DOM di movimento è molto più veloce con #id.

jQuery's .html() utilizza javascript innerHTML sotto il cofano. Se puoi usarlo direttamente, avrà un incremento delle prestazioni.

$(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(); 
});

Ecco un jsFiddle

fonte

2013-03-16 09:03:59

ricerca nella tabella html

risposta

Problemi correlati