保留表頭以隱藏搜索結果

Question

使用表w3schools上的表排序作爲基礎，如何保持表頭不會在搜索表時消失？

$(document).ready(function(){ 
    $('#search-attorneys').on('keyup', function(){ 
    var input, filter, table, tr, td, i; 
    input = $("#search-attorneys"); 
    filter = $("#search-attorneys").val().toUpperCase(); 
    table = $("#attorneys"); 
    tr = $("tr"); 
    for (i = 0; i < tr.length; i++) { 
     tds = tr[i].getElementsByTagName("td"); 
     var found = false; 
     for (j = 0; j < tds.length; j++) { 
     td = tds[j]; 
     if (td) { 
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
      found = true; 
      break; 
      } 
     } 
     } 
     if (found) { 
     tr[i].style.display = ""; 
     } else { 
     tr[i].style.display = "none"; 
     } 
    } 
    }); 
}); 

的jsfiddle：LINK

Answer 1

你需要做的改變在第一個for循環： -

for (i = 1; i < tr.length; i++) { // not start with 0 start with 1. 

來離開桌子<thead><tr>，然後開始休息<tr>搜索。

注意： - 檢查它，如果你有任何問題。我會爲你創造一個榜樣。

Answer 2

這可以通過將在TBODY的行，並改變variabl可以容易地實現，E tr選擇器。

$(document).ready(function(){ 
 
    $('#search-attorneys').on('keyup', function(){ 
 
    var input, filter, table, tr, td, i; 
 
    input = $("#search-attorneys"); 
 
    filter = $("#search-attorneys").val().toUpperCase(); 
 
    table = $("#attorneys"); 
 
    tr = $("tbody tr"); // CHANGED 
 
    for (i = 0; i < tr.length; i++) { 
 
     tds = tr[i].getElementsByTagName("td"); 
 
     var found = false; 
 
     for (j = 0; j < tds.length; j++) { 
 
     td = tds[j]; 
 
     if (td) { 
 
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
      found = true; 
 
      break; 
 
      } 
 
     } 
 
     } 
 
     if (found) { 
 
     tr[i].style.display = ""; 
 
     } else { 
 
     tr[i].style.display = "none"; 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="search-attorneys" placeholder="Search for names.." title="Type in a name"> 
 

 

 
<table id="attorneys"> 
 
    <thead class="cf"> 
 
      <tr> 
 
      <th class="numeric">attorney</th> 
 
      <th class="numeric">location</th> 
 
      <th class="numeric">practice area</th> 
 
      <th class="numeric">email</th> 
 
      <th class="numeric">phone</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
    <td data-title="location">Alfreds Futterkiste</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Berglunds snabbkop</td> 
 
    <td>Sweden</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Koniglich Essen</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Laughing Bacchus Winecellars</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Magazzini Alimentari Riuniti</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>North/South</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Paris specialites</td> 
 
    <td>France</td> 
 
    </tr> 
 
     </tbody> 
 
</table>