Rendre la fonction de recherche Javascript rapide

Question

J'ai fait une petite fonction de recherche avec javascript pour trouver une chaîne dans une table: Il y a des "tr" qui contiennent simplement un nombre comme id et il y a "tr" s contenant « childNode + idOfParentNode » comme id (par exemple:

<tr id="1"> ... </tr> 
<tr id="childNode1"> ... </tr> 

maintenant, je veux regarder à travers la table, si une chaîne donnant ou une partie de celui-ci correspond au contenu du parent- « tr » Si. ce n'est pas le cas je veux que le parent- "tr" et son childNode- "tr" soient cachés (ou effondrés) et je veux qu'ils soient montrés si la corde ou une partie de celle-ci correspond: Voici ma fonction:

// inputFieldId := Id of the inputField that contains the search-String 
// tableId := Id of the table to be searched 
function searchTable(inputFieldId, tableId){ 
    var inputField = document.getElementById(inputFieldId); 
    var input = inputField.value.toUpperCase(); 
    var countRows = jQuery('#' + tableId + ' tr').length; 
    jQuery('#loader').css("visibility", "visible"); 
    var hideChildren = false; 
    var childId = -1; 
    var parentId = -1; 

    for(var i = 1; i <= countRows; i++){ 
     var trsId = jQuery('#' + tableId + ' tr:nth-child('+i+')').attr('id'); 
     // I am only looking for <tr> that are not "childnodes" 
     if(trsId.indexOf("childNode") == -1){ 
      var firstTd = jQuery('#' + tableId + ' tr:nth-child('+i+') td:nth-child(1)'); 
      var firstTdValue = firstTd.text(); 
      if(firstTdValue.indexOf(input) == -1){ 
       hideChildren = true; 
       childId = trsId; 
       parentId = i; 
       jQuery('#' + tableId + ' tr:nth-child('+i+')').children('td').css("visibility", "collapse"); 
       jQuery('#' + tableId + ' tr:nth-child('+i+')').css("visibility", "collapse"); 
      } 
      else{ 
       hideChildren = false; 
       childId = trsId; 
       parentId = i; 
       jQuery('#' + tableId + ' tr:nth-child('+i+')').children('td').css("visibility", "visible"); 
       jQuery('#' + tableId + ' tr:nth-child('+i+')').css("visibility", "visible"); 
      } 
     } 
     else{ 
      childNodeId = "childNode"+childId; 
      if(hideChildren && trsId == childNodeId && parentId > -1){ 
       jQuery('#' + tableId + ' tr:nth-child('+i+')').children('td').css("visibility", "collapse"); 
       jQuery('#' + tableId + ' tr:nth-child('+i+')').css("visibility", "collapse"); 
      } 
      else{ 
       jQuery('#' + tableId + ' tr:nth-child('+i+')').children('td').css("visibility", "visible"); 
       jQuery('#' + tableId + ' tr:nth-child('+i+')').css("visibility", "visible"); 
      } 
     } 
    } 
    jQuery('#loader').css("visibility", "hidden"); 
} 

Sérieusement, cela fonctionne bien, mais il faut toujours !!! surtout si c'est une table plus grande, alors je me demandais si quelqu'un voyait un moyen de rendre ma fonction plus rapide et plus efficace.

Thnx à l'avance :)

===================================== =======================================

EDIT: Je l'ai fait fonctionner ... il ressemble maintenant à ceci et fonctionne à merveille :)

function searchTable(inputFieldId, tableId){ 
    jQuery('#loader').show(); 
    var input = jQuery('#'+inputFieldId).val().toUpperCase(); 
    var parentId = -1 

    jQuery('#' + tableId + ' tr').each(function(i) { 
     var thiss = jQuery(this); 
     var showP = false; 
     var showC = false; 
     if (thiss.attr('id').indexOf('child') < 0) { // parent 
      parentId = thiss.attr('id'); 
      showP = !(thiss.find('td:first').text().indexOf(input) < 0); 
      thiss.toggle(showP); 
     } 
     else{ // childNode 
      var childId = "childNode"+parentId; 
      var parent = jQuery('#'+tableId+' tr#'+parentId+':visible').length; 
      showC = !(thiss.attr('id') == childId && parent < 1); 
      thiss.toggle(showC); 
     }   
    }); 
    jQuery('#loader').css("visibility", "hidden"); 
} 

Merci :)

Answer 1

Il serait plus facile si les parents (et enfants) avait des classes les identifiant comme telles, mais vous pouvez vous débrouiller avec les identifiants si besoin est. J'utilise $ au lieu de jQuery, mais vous pouvez le changer si nécessaire.

// inputFieldId := Id of the inputField that contains the search-String 
// tableId := Id of the table to be searched 
function searchTable(inputFieldId, tableId){ 
    var input = $('#' + inputFieldId).text().ToUpperCase(); 

    $('#loader').show(); 

    $('#' + tableId + ' tr').each(function(i) { 
     var $this = $(this); 
     var show = false; 
     // if ($this.hasClass('parent')) { // would be nice 
     if ($this.attr('id').indexOf('child') < 0) { // parent 
      // note that text() here is the combined texts of all tds 
      // adjust with :first if you really want to check only the first 
      show = !($this.find('td').text().indexOf(input) < 0); 
     } 
     $this.toggle(show); 
    }); 

    $('#loader').hide(); 
} 

Answer 2

1) Cache le sélecteur que vous créez plusieurs fois. Ensuite, utilisez la variable à partir de là dans.

var $rows = jQuery('#' + tableId + ' tr:nth-child('+i+')'); 

$rows.children()... 

2) pour obtenir les enfants directs que vous pouvez utiliser « > » dans votre sélecteur

var $rows = jQuery('#' + tableId + '>tr:nth-child('+i+')'); 

Answer 3

var rowsCache = null; 
function searchTable(inputFieldId, tableId){ 

    var input = String(jQuery("#inputFieldId").val()).toUpperCase(); 

    if (rowsCache==null) 
     rowsCache = jQuery('#' + tableId + ' tr'); 

    jQuery('#loader').css("visibility", "visible"); 

    //if there are many rows is faster -- 
    //for(var i = (countRows-1); i >= 0; i--) { 

    jQuery(rowsCache).each(function() { 
     if ((jQuery(this).html().indexOf(input)!=-1) 
     { 
      ... 
     } 
    }); 
    jQuery('#loader').css("visibility", "hidden"); 
}