用js或jquery進行表格行過濾

即時通訊或jquery並沒有如此接近，但我有一些表格有一些條目。現在我想通過左側的列表過濾此表。用js或jquery進行表格行過濾

<ul class="filter"> 
    <li class="filter-header"> Filter argument 1: </li> 
    <li><a href="#"> Yahoo </a></li> 
    <li><a href="#"> Google </a></li> 
    <li class="filter-header"> Filter argument 2: </li> 
    <li><a href="#"> GPH_est </a></li> 
    <li><a href="#"> Q_est </a></li> 
</ul> 

<div class="tableResult"> 
    <table class="table"> 
     <tr> 
      <td>Yahoo</td> 
      <td>GPH_est</td> 
     </tr> 
     <tr> 
      <td>Google</td> 
      <td>Q_est</td> 
     </tr> 
    </table> 
</div>

這個例子很簡單。所以我想要的是，我可以點擊任何過濾器參數1，將其設置爲活動狀態，並且該表格顯示具有第一個參數的所有條目，然後如果我單擊任何過濾器參數2，表格只應顯示第一個條目和第二個參數。

我使用python和django。

我希望有人能幫助我，因爲我不知道:)

編輯：現在我已添加使用一些慢，簡單的，詳盡的檢查標記

來源

2013-07-24 user2412771

將您能修改HTML標記，比如增加一些類屬性等 –

已經改變 – user2412771

嘲笑了您請求的functionaltiy。 - http://jsfiddle.net/B2Muh/3/

$(function() { 
    $filterArgs = $("ul li").filter(function() { 
     var txt = $(this).text(); 
     return txt.indexOf("Filter") < 0; 
    }); 
    $filterArgs.click(function() { 
     $(this).toggleClass('active'); 
     $("table tr").hide(); 
     $("table tr td").each(function() { 
      $rowData = $(this); 
      $filterArgs.filter(".active").each(function() { 
       if ($rowData.text() == $(this).text()) { 
        $rowData.parent().show(); 
        return false; 
       } 
      }); 
     }); 
    }); 
});

來源

2013-07-24 06:33:02 nbrooks

（這是你修改過，但你應該能夠做出這些改變遵循這種模式） – nbrooks

它工作得很好，但如果我選擇一個過濾器參數1和一個過濾器參數2它顯示了所有條目與參數1和所有條目與參數2.我想這樣做，如果我選擇了兩個參數，只顯示第一個參數和第二個參數的條目。 – user2412771

我寫了一個示例代碼。我認爲這是你想要的。

$('body').on('click','li',function(){ 

    var filterText=$(this).html().trim(); 
    var splicedTextArray=filterText.split(" "); 
    var filter=splicedTextArray[0].toLowerCase(); 

    $('tr').each(function(index,value){ 

     var valueText=$(this).find('td:first').html(); 
     var isRegexmatch=valueText.toLowerCase().indexOf(filter); 

     if(isRegexmatch<0) 
     { 
     $(this).hide(); 
     }else 
     { 
     $(this).show(); 
     } 


    }); 

});

See it in action on JSFiddle

來源

2013-07-24 06:40:29

對不起，我錯過了鏈接..現在你可以看到它。 –

sry但不起作用，如果我選擇參數1，然後參數2. – user2412771

你可以調整代碼，使其成爲可能。這只是模擬示範。 –

用js或jquery進行表格行過濾

回答

相關問題