Question

当我点击A-D时，表数据必须只显示在A和D之间开始的名称。我如何使用jquery实现它。

感谢你

Answer 1

以下为样本表：

<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）遍历每个表格行并查看＆＃34;第一个名称＆＃34;柱; （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.

Answer 2

我已经创建了一个易于理解的如何实现此类过滤的摘要：

＆＃13;

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
    	firstChar = this.textContent[0].toLowerCase(), // important..
        validRow  = firstChar >= delimiter[0] && firstChar <= delimiter[1];

    // show/hide row
    tr.style.display = validRow ? '' : 'none';
  });

};

＆＃13;

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

＆＃13;

如何使用jquery显示从A-D开始的文本

2 个答案: