表格搜索Javascript和jQuery CSS

Question

我想通過球員姓名，國籍等搜索，因爲球員名單很長。什麼是JavaScript和jQuery使用，是否有任何CSS需要輸入？我嘗試了各種文章，但它不會工作。

<input type="text" id="search" placeholder="Search Player"></input> 

<table class="playersindex"> 
    <thead> 
     <tr> 
      <th class="wrapper-top" colspan="7">PLAYERS INDEX/2013-14/<span style="color: #ff3333;">SSSC</span></th> 
     </tr> 
     <tr> 
      <th width="23">NO.</th> 
      <th class="player">PLAYER</th> 
      <th></th> 
      <th width="105">POSITION</th> 
      <th width="30">AGE</th> 
      <th width="105">NATIONALITY</th> 
      <th width="105">FIRST SEASON</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="number">1</td> 
      <td class="player"><a href="http://www.premierleague.com/en-gb/players/profile.html/chuba-akpom">Kevin Siew</a></td> 
      <td class="playerphoto"></td> 
      <td>Goalkeeper</td> 
      <td>23</td> 
      <td>Singaporean</td> 
      <td>2010/11</td> 
     </tr> 
     <tr> 
      <td class="number">2</td> 
      <td class="player"><a href="http://www.premierleague.com/en-gb/players/profile.html/chuba-akpom">Mohamad Hairul</a> (C)</td> 
      <td class="playerphoto"></td> 
      <td>Goalkeeper</td> 
      <td>23</td> 
      <td>Singaporean</td> 
      <td>2010/11</td> 
     </tr> 
     <tr> 
      <td class="number">3</td> 
      <td class="player"><a href="http://www.premierleague.com/en-gb/players/profile.html/chuba-akpom">Nazir Samaluddin</a></td> 
      <td class="playerphoto"></td> 
      <td>Goalkeeper</td> 
      <td>23</td> 
      <td>Singaporean</td> 
      <td>2010/11</td> 
      .... 
     <tr> 
      <th width="23">NO.</th> 
      <th class="player">PLAYER</th> 
      <th></th> 
      <th width="105">POSITION</th> 
      <th width="30">AGE</th> 
      <th width="105">NATIONALITY</th> 
      <th width="105">FIRST SEASON</th> 
     </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
      <th class="wrapper-bottom" colspan="7">LAST UPDATED: 10 December 2013, 1720</th> 
     </tr> 
    </tfoot> 
</table> 

<script type="text/Javascript"> 
    $("#search").keyup(function() { 
     var value = this.value; 

     $("table.playersindex").find("tr").each(function(index) { 
      if (!index) return; 
      var id = $(this).find("td").first().text(); 
      $(this).toggle(id.indexOf(value) !== -1); 
     }); 
    }); 
</script> 

Answer 1

試試這個

$("#search").keyup(function() { 
    var value = this.value.toLowerCase().trim(); 

    $("table tr").each(function (index) { 
     if (!index) return; 
     $(this).find("td").each(function() { 
      var id = $(this).text().toLowerCase().trim(); 
      var not_found = (id.indexOf(value) == -1); 
      $(this).closest('tr').toggle(!not_found); 
      return not_found; 
     }); 
    }); 
}); 

DEMO