Wie man Texte von A-D mit jquery zeigt

Question

Wenn ich auf A-D klicken, müssen die Tabellendaten nur Name zeigen, der zwischen A und D beginnt. Wie kann ich das mit jquery implementieren.

deinnkening u

Answer 1

habe ich erstellt eine einfach zu verstehende Schnipsel, wie eine solche Filterung zu implementieren:

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

Mit dem folgenden als Beispieltabelle:

<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> 

Sie eine Funktion, um Ihre Schaltfläche klicken zuweisen können, die wird: (1) durch jede Zeile der Tabelle gehen und innerhalb der aussehen Text in der Spalte "Vorname"; und (2) verstecken Sie diejenigen, die nicht den ersten Buchstaben enthalten, der mit den Buchstaben Ihres Trennzeichens übereinstimmt (Buchstaben A-D). Funktion unten:

$('#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(); 
      } 
     }); 

     }); 

Hier ist ein working fiddle.