JavaScript-Suchfunktion schnell machen

Question

Ich habe eine kleine Suchfunktion mit Javascript gemacht, um nach einer Zeichenfolge in einer Tabelle zu suchen: Es gibt "tr" s, die einfach eine Zahl als ID enthalten und es gibt "tr" s , die „childNode + idOfParentNode“ als ID (zB:

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

Jetzt möchte ich durch den Tisch sehen, ob eine Angabe String oder ein Teil davon den Inhalt des Eltern- „tr“ passt If. das ist nicht der Fall, ich möchte, dass die Eltern- "tr" und seine ChildNode- "tr" s ausgeblendet werden (oder zusammengebrochen). Und ich möchte, dass sie angezeigt werden, wenn die Zeichenfolge oder ein Teil davon übereinstimmt. Hier ist meine Funktion:

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

Im Ernst, das funktioniert gut, aber es dauert ewig !!! vor allem, wenn es ein größerer Tisch ist, also habe ich mich gefragt, ob jemand einen Weg sah, um meine Funktion schneller und effizienter zu machen.

Thnx im Voraus :)

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

EDIT: Ich habe es geschafft ... es wunderbar sieht nun wie folgt aus und arbeitet :)

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

Danke :)

Answer 1

verwenden, es wäre einfacher, wenn die Eltern (und Kinder) hatten Klassen, die sie als solche identifizierten, aber Sie können nötigenfalls mit den IDs auskommen. Ich benutze $ anstelle von jQuery, aber Sie können das ändern, wenn Sie müssen.

// 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, um die Wähler, die Sie mehrmals erstellen. Dann die Variable verwenden, um von da an in.

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

$rows.children()... 

2) direkte Kinder bekommen können Sie '>' in Ihren Wählern

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