jQuery Alpabetical按名稱在表，A，B，C等列表中篩選

我有一個工作演示，但僅用於listview，我需要能夠點擊頂部的A，B，C等列表，然後按照表中的聯繫人名稱進行過濾。jQuery Alpabetical按名稱在表，A，B，C等列表中篩選

因此，只要您點擊A，它就會顯示錶格中以'A'開頭的所有名稱。

正如我所說的它適用於列表視圖，但不知道如何讓它在表內工作？

希望有人可以提供幫助。它基於一個來自http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx的插件不知道在哪裏或如何做這個手動，相當新的jQuery。

$('ul.list-nav').listnav({   
    includeAll: false,     
    noMatchText: 'Sorry, nothing matched this filter, please try another letter.', 
     includeAll: true, 
    initLetter: 'n', 
    showCounts: false     
});

感謝

來源

2013-04-05 John

這是我發現http://jsfiddle.net/hDxzP/76/ – Morpheus 2013-04-05 09:18:09

我相信有無數個「表分揀機」插件在那裏，但這種短期和簡單的代碼可以實現你在找什麼

腳本

 var alphas = 'abcdefghijklmnopqrstuvwxyz'; 
    $(document).ready(function() { 
     var tmp = ''; 
     for (var x = 0; x < 26; x++) tmp += '<a href="#">' + alphas[x].toUpperCase() + '</a>&nbsp;&nbsp;'; 
     $('#table_filter').append(tmp); 

     $('#table_filter a').click(function() { 

      if ($(this).attr('id') == 'show_all') { 
       $('#searchNames tbody tr').css('display', 'table-row'); 
       $('#message').html('displaying all rows'); 
       return false; 
      } 

      var alpha = $(this).html(); 
      $('#searchNames tbody tr').hide().filter(function() { 
       var td = $('td:first', $(this)); 
       return td.length && td.html() && new RegExp('^' + alpha + '.*$', 'i').test(td.html().toLowerCase()); 
      }).css('display', 'table-row'); 
      $('#message').html('displaying rows with "' + alpha + '"'); 
      return false; 
     }) 
    });

AND The Markup

<div id="table_filter"> 
    <a id="show_all" href="#">Show All</a> 
    </div> 
    <p id="message"></p> 
    <table class="table1" id="searchNames" style="width:500px;"> 
    <thead> 
     <tr> 
      <th>CONTACT NAME</th> 
      <th>col 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>ssfjkn jkdsnf</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>asdl kln</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>apodf</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>opkpokj</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>lkohasd</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>nlkcn</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>qwdsdfsd</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>essfjkn jkdsnf</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>easdl kln</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>qapodf</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>oopkpokj</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>dlkohasd</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>snlkcn</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>vqwdsdfsd</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>ssfjkn jkdsnf</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>asdl kln</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>apodf</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>opkpokj</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>lkohasd</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>nlkcn</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>qwdsdfsd</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>essfjkn jkdsnf</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>easdl kln</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>qapodf</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>oopkpokj</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>dlkohasd</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>snlkcn</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>vqwdsdfsd</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>ssfjkn jkdsnf</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>asdl kln</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>apodf</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>opkpokj</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>lkohasd</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>nlkcn</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>qwdsdfsd</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>essfjkn jkdsnf</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>easdl kln</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>qapodf</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>oopkpokj</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>dlkohasd</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>snlkcn</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>vqwdsdfsd</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>ssfjkn jkdsnf</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>asdl kln</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>apodf</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>opkpokj</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>lkohasd</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>nlkcn</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>qwdsdfsd</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>essfjkn jkdsnf</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>easdl kln</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>qapodf</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>oopkpokj</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>dlkohasd</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>snlkcn</td> 
      <td>Col2</td> 
     </tr> 
     <tr> 
      <td>vqwdsdfsd</td> 
      <td>Col2</td> 
     </tr> 
    </tbody> 
    </table>

而的jsfiddle

http://jsfiddle.net/Khq9k/2/

UPDATE

，使其過濾器的基礎上4 <td>，更換

var td = $('td:first', $(this));

與

var td = $('td:nth-child(4)', $(this));

來源

2013-04-05 09:51:46 Ejaz

輝煌 - 你將如何指定它來尋找聯繫人姓名第四屆TD一起？ – John 2013-04-05 10:15:46

請檢查更新 – Ejaz 2013-04-05 10:26:11

再次感謝您！作品一種享受！ :-)不要假設你知道突出顯示td列是否可以給用戶指示找到哪個列？ – John 2013-04-05 10:41:37

上面的帖子在我從數據庫中讀取的動態值上不適用。我試過寫一些不那麼複雜的東西，並且工作得很好。

$(document).ready(function() { 
var alphas = 'abcdefghijklmnopqrstuvwxyz'; 
var tmp = ''; 
     for (var x = 0; x < 26; x++) tmp += '<a href="#">' + alphas[x].toUpperCase() + '</a>&nbsp;&nbsp;'; 
     $('#table_filter').append(tmp); 

     $('#table_filter a').click(function() { 
      var alpha = $(this).html(); 
      if(alpha == 'Show All'){ 
       $('#searchNames tbody tr').css('display', 'table-row'); 
      } 
      else { 
       $('#searchNames tbody tr').each(function(index) { 
        var cur = $(':nth-child(1)', this).text().trim(); 
        if(cur.charAt(0) === alpha) { 
         $(this).css('display', 'table-row'); 
        } 
        else { 
         $(this).hide(); 
        } 
       }); 

      } 
     }); 
    });

來源

2016-09-08 20:57:02

jQuery Alpabetical按名稱在表，A，B，C等列表中篩選

回答

相關問題