快速製作Javascript搜索功能

Question

我用javascript在搜索表中尋找了一個字符串： 有一些「tr」只包含一個數字作爲id，並且有「tr」s包含「childNode + idOfParentNode」爲標識（如：

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

現在我想通過表一看，看看它的給予字符串或部分父 - 「TR」的內容相匹配。如果。這不是我想要父 - 「tr」及其childNode-「tr」被隱藏（或摺疊）的情況，而且我希望如果字符串或它的一部分匹配，我們會顯示它們。以下是我的功能：

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

說真的，這工作正常，但它需要永遠！特別是如果它是一個更大的桌子，所以我想知道是否有人看到一種方法來使我的功能更快，更高效。

日Thnx提前:)

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

編輯：我讓它工作......它現在看起來是這樣和奇妙的作品:)

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

謝謝:)

Answer 1

這將是更容易，如果父母（和孩子們）有類似識別它們的類，但是如果需要的話，你可以通過ID來獲得。我使用的是$而不是jQuery，但如果需要，可以將其更改回來。

// 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）高速緩存創建多次選擇。然後使用變量從此英寸

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

$rows.children()... 

2），以獲得直接的兒童可以使用「>」在您選擇

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