Question

我有一个MVC.net网络应用程序。在视图中，我有一个来自我的数据库的记录列表。记录以下列格式显示

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

我想要做的是在桌子上面放一个按钮＆＃34;显示/隐藏＆＃34; 这将隐藏/显示点击时的一些结果。这是我的代码的过于简化的骨架。我的实际表格有更多的信息。

Answer 1

标记应显示/隐藏的项目，例如使用标记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 = $('.@markerCssClass');
       affectedElements.show();
    });
</script>

Answer 2

如果您将按钮放在桌子前面并且处于同一级别或更高级别，则可以使用纯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>

隐藏/显示基于过滤器的结果

2 个答案: