如何使用jQuery顯示從A-D開始的文本

Question

當我點擊A-D時，表格數據將只能顯示A和D之間的名稱。我如何使用jQuery來實現此功能。

感謝ü

Answer 1

我創建了一個易於理解如何實現這樣的過濾片段：

var $table = $('table'); 
 

 
$('.filter').click(filterTable); 
 

 
function filterTable(e){ 
 
    var delimiter = $(this).data('value'); 
 
    
 
    // find all the second cells inside all the rows 
 
    $table.find('tr').find('td:eq(1)').each(function(){ 
 
    var tr  = this.parentNode, // get the cell's row 
 
    \t firstChar = this.textContent[0].toLowerCase(), // important.. 
 
     validRow = firstChar >= delimiter[0] && firstChar <= delimiter[1]; 
 

 
    // show/hide row 
 
    tr.style.display = validRow ? '' : 'none'; 
 
    }); 
 

 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button data-value="az" class='filter'>All</button> 
 
<button data-value="ad" class='filter'>A-D</button> 
 
<br><br> 
 
<table> 
 
    <thead> 
 
     <tr> 
 
      <th>ID</th> 
 
      <th>First Name</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>Alan</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2</td> 
 
      <td>Alex</td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>Charlie</td> 
 
     </tr> 
 
     <tr> 
 
      <td>4</td> 
 
      <td>Edward</td> 
 
     </tr> 
 
     <tr> 
 
      <td>5</td> 
 
      <td>Jack</td> 
 
     </tr> 
 
     <tr> 
 
      <td>6</td> 
 
      <td>Sam</td> 
 
     </tr> 
 
    <tbody> 
 
</table>

Answer 2

通過以下內容作爲示例表：

<button id="ad">A-D</button> 

<table id="personnel" border=1> 
    <thead> 
     <tr> 
     <th>ID</th> 
      <th>First Name</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="pid">1</td> 
      <td class="firstname">Alan</td>   
     </tr> 
     <tr> 
      <td class="pid">2</td> 
      <td class="firstname">Alex</td>   
     </tr> 
     <tr> 
      <td class="pid">3</td> 
      <td class="firstname">Charlie</td>   
     </tr> 
     <tr> 
      <td class="pid">4</td> 
      <td class="firstname">Edward</td>   
     </tr> 
     <tr> 
      <td class="pid">5</td> 
      <td class="firstname">Jack</td>   
     </tr> 
     <tr> 
      <td class="pid">6</td> 
      <td class="firstname">Sam</td>   
     </tr> 
    <tbody> 
</table> 

可以分配一個功能到您按一下按鈕，這將：（1）仔細檢查每個錶行，看看裏面的「名字」欄內的文字; （2）隱藏那些不包含與分隔符（字母A-D）的字母相匹配的第一個字母的字符。以下功能：

$('#ad').click(function() { 
     var delimiter = 'ABCD'; 
     $("#personnel td.firstname").each(function(){ 
      if(curr.indexOf($(this).text().substr(0,1)) != -1){ 
       $(this).parent().show(); 

      }else{ 
      $(this).parent().hide(); 
      } 
     }); 

     }); 

這裏有一個working fiddle.