2013-12-13 68 views
0

我已經創建了一個腳本來查找表中的字符串。當它發現它顯示該行,否則隱藏它。 它在Chrome中工作得很好,但它在Firefox和Internet Explorer中滯後一些。這段代碼是好還是可以更好?在表中搜索jQuery

在此先感謝

$("#searchValue").keyup(function() { 

    var table = $(this).siblings('table').not(':hidden'); 
    var name = $("#searchValue").val(); 
    if (name === "") { 
    $(table).find('tr').show(); 
    $(table).trigger('update'); 
    } 
    else { 
    name = name.toLowerCase(); 
    var trs = $(table).find('tr').not(':first'); 
    trs.each(function() { 
     var tr = $(this); 
     var count = ($(tr).children('td').length); 
     var suc = -1; 
     for (var i = 0; i < count; i++) { 
     var state = $(tr).children("td").eq(i).html(); 
     state = state.toLowerCase(); 
     if (state.match(name)) { 
      suc = 1; 
     } 
     else if (suc !== 1) { 
      suc = 0; 
     } 
     } 
     if (suc === 1) { 
     $(tr).show(); 
     } 
     else { 
     $(tr).hide(); 
     } 
    }); 

    $(table).trigger('update'); 
    } 
}); 

表:

<table id='tableProject' class='tablesorter'> 
    <thead> 
     <tr> 
      <th>Project ID</th> 
      <th>Customer</th> 
      <th>Description</th> 
      <th>Status</th> 
      <th>Max Hours</th> 
      <th>Achieved</th> 
      <th>Difference</th> 
     </tr> 
    </thead> 
    <tbody> 

    </tbody> 
</table> 
+0

你可以提供一個表樣品也 –

+0

是否有可能爲你使用數據表? –

+0

更多的記錄,以便我們可以玩 –

回答

1

.eq()中的for循環可能潛在(不積極)是性能問題的原因。在每個tr內,您都說「現在迭代DOM多次,並找到具有此索引的td」。

另外IMO,在.each()中使用for循環是多餘的。

避免使用在這種情況下.eq(),並簡單地使用.filter()

Demo

$(function() { 
    $("#searchValue").keyup(function() { 
     var table = $(this).siblings('table').not(':hidden'), 
      name = $("#searchValue").val().toLowerCase(); 

     if (!name) { 
      $(table).find('tr').show(); 
      $(table).trigger('update'); 
     } else { 
      var trs = $(table).find('tbody tr'); 

      trs.each(function() { 
       var tr = $(this), 
        results = null; 

       results = tr.find('td').filter(function() { 
        return $(this).html().toLowerCase().match(name); 
       }); 

       if (!results.length) { 
        tr.hide() 
       } else { 
        tr.show(); 
       } 
      }); 
      $(table).trigger('update'); 
     } 
    }); 
});