基於過濾器隱藏/顯示結果

我有一個MVC.net web應用程序。在視圖中，我有來自我的數據庫的記錄列表。的記錄顯示在下面的格式基於過濾器隱藏/顯示結果

if (List!=null) 
{ 
<table> 
    <thead> 
    <th></th> 
    </thead>  
    <tbody> 
    foreach (item in List) 
     if (item.startWith("AA")) 
     { 
     hide the item originally. and add class to be used by javascript/jquery to show/hide element 
     } 
    <td>Item</td> 
    </tbody> 
</table> 
}

我想要做的就是把表「顯示/隱藏」，將隱藏/點擊時顯示的一些結果上方的按鈕。這是我的代碼過於簡化的骨架。我的實際表格有更多的信息。

來源

2017-10-19 laz

**部分結果**？你可以說得更詳細點嗎？我們需要一個模式 – Shyju

我需要隱藏以前綴開頭的結果。「AA」。我將更改代碼以顯示 – laz

標記應顯示/隱藏的項目，例如帶有標記CSS類。您還可以設置display CSS屬性以最初隱藏它們。

@{ const string markerCssClass = "js-hideable"; } 
<table> 
    <thead> 
     <th></th> 
    </thead> 
    <tbody> 
     foreach (item in List) { 
      @{ var isHideable = item.StartsWith("AA"); } 
      <td class="@(isHideable ? markerCssClass : string.Empty)" 
       style="display: @(isHideable ? "none" : "block")">Item</td> 
     } 
    </tbody> 
</table> 

<button id="show">Show</button>

然後使用jquery顯示/隱藏這些項目使用標記類作爲選擇器。

<script type="text/javascript"> 
    $('#show').on('click', function() { 
     var affectedElements = $('[email protected]'); 
     affectedElements.show(); 
    }); 
</script>

來源

2017-10-19 13:29:50

，這要感謝Georg，這很有用。 – laz

如果您將表格放在表格之前並且處於同一級別或更高級別，則可以使用純CSS進行過濾。

<html> 
<head> 
    <style> 
     #filter-toggle:checked ~ .filterable-table .filterable { display: none; } 
    </style> 
</head> 
    <body> 
     <input id="filter-toggle" type="checkbox"> 
     <label for="filter-toggle"> Filter</label> 
     <table class="filterable-table"> 
      <tr class="filterable"><td>Hide me when filtered</td></tr> 
      <tr><td>Show me when filtered</td></tr> 
     </table> 
    </body> 
</html>

來源

2017-10-19 13:50:03

謝謝史蒂夫。我用Georg方法解決了這個問題 – laz

基於過濾器隱藏/顯示結果

回答

相關問題