使用ul过滤表

Question

我想使用ul onclick过滤表，但我不知道如何。我需要从哪里开始？

Screenshot

这是我的代码：

<ul class="nav nav-tabs">
    @foreach (var DormName in Model.Select(s => s.DormName).Distinct().ToArray())
    {
        <li id="lol";><a href="#tab_1" data-toggle="tab">@DormName</a></li>
    }
    <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>
</ul>

这是我的桌子。我想使用li（宿舍名称）对其进行过滤。我无法使用input = text过滤表，但无法使用ul过滤表。

<table class="table table-hover" id="TableCalendar">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.DormName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.RoomNumber)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.BedNumber)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.GuestName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Classification)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Gender)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CheckIn)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CheckOut)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.StatusType)
        </th>
        <th>Action</th>
    </tr>
    <tbody id="MyTable">
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.DormName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.RoomNumber)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.BedNumber)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.GuestName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Classification)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Gender)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CheckIn)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CheckOut)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.StatusType)
                </td>

                <td>
                    @Html.ActionLink("Edit", "GenaralUpdate", "Reservation", new { item.DormName, item.RoomNumber, item.BedNumber }, new
               {
                   data_target = "#myModal",

                   data_toggle = "modal"
               })   <i class="fa fa-pencil" aria-hidden="true"></i>
                </td>
            </tr>
        }
    </tbody>
</table>