Как показать тексты, начинающиеся с A-D с помощью jquery

Question

Когда я нажимаю на A-D, в данных таблицы должно отображаться только имя, начинающееся между A и D. Как я могу реализовать это с помощью jquery.

Поблагодарив U

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.