フィルタに基づく結果を非表示/表示

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

Steveに感謝します。私はゲオルグのアプローチを使用して問題を解決しました – laz

フィルタに基づく結果を非表示/表示

答えて

関連する問題