Javascript-search-functionを高速化する

Question

javascriptを使用してテーブル内の文字列を検索する少しの検索機能を作った： "tr"には単にidという数字が入っていて、 "tr"それは、例えば（IDとして「childNodeが+ idOfParentNode」を含む：

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

は、今私は、テーブルを見てみたい、それを与える文字列または一部がparent-「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 ===================================== ==================

EDIT：私はそれを作った...次のようになりますし、素晴らしい作品:)

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