Javascript 使用复选框按列筛选

我希望能够使用复选框筛选我的数据表

@{
var schools=CurrentPage.Children.OrderBy（“kommun”）；
}


林克平


诺尔克平


乔尔比


滤器
科门
斯科拉
资料
工业贸易署
地址
Övrigt
@foreach（学校中的var学校）
{
var times=school.Children.Where（“日期>日期时间.现在.日期”）.OrderBy（“日期”）；
foreach（以时间为单位的var时间）
{
@如果（！string.IsNullOrEmpty（school.kommun））
{
@孔门学校
}
其他的
{
}
@如果（！string.IsNullOrEmpty（school.Name））
{
@学校，名字
}
其他的
{
}
@如果（time.date！=null）
{
@time.date.ToString（“yyyy-MM-dd”）
}
其他的
{
}
@如果（！string.IsNullOrEmpty（time.time））
{
@一次又一次
}
其他的
{
}
@如果（！string.IsNullOrEmpty（school.address））
{
@学校地址
}
其他的
{
}
@如果（！string.IsNullOrEmpty（school.oevrigt.ToString（）））
{
@学校
}
其他的
{
}
}
}

我该怎么办？我以前从未使用过过滤器，但我假设我必须用数据表检查过滤器中的值。我也知道我也需要JavaScript，因为我不希望每次用户选择过滤器时都重新加载页面

如果您只使用javascript，我将不胜感激

/*使用复选框的演示筛选表。使用复选框对第一个td值*//*演示筛选表进行筛选。针对第一个td值进行筛选*/
/*设置“就绪”处理程序*/
document.addEventListener（'DOMContentLoaded'，initFunc）；
/*文档准备就绪后，为筛选器框设置单击处理程序*/
函数initFunc（事件）{
var filters=document.getElementsByName（'tablefilter'）；
对于（变量i=0；i@{
    var schools = CurrentPage.Children.OrderBy("kommun");
}
<dl class="dropdown">

                <dt>
                    <a href="#">
                        <span class="hida">Select</span>
                        <p class="multiSel"></p>
                    </a>
                </dt>

                <dd>
                    <div class="mutliSelect">
                        <ul>
                            <li>
                                <input type="checkbox" value="Linköping" />Linköping
                            </li>
                            <li>
                                <input type="checkbox" value="Norrköping" />Norrköping
                            </li>
                            <li>
                                <input type="checkbox" value="Mjölby" />Mjölby
                            </li>
                        </ul>
                    </div>
                </dd>
                <button>Filter</button>
            </dl>

            <div id="no-more-tables" class="sorttable">

                <table>
                    <thead>
                        <tr>
                            <th style="width: 15%;" data-sort-initial="true">
                                Kommun
                            </th>
                            <th style="width: 20%;">
                                Skola
                            </th>
                            <th style="width: 15%;">
                                Datum
                            </th>
                            <th style="width: 15%;" data-sort-ignore="true">
                                Tid
                            </th>
                            <th style="width: 20%;" data-sort-ignore="true">
                                Adress
                            </th>
                            <th style="width: 15%;" data-sort-ignore="true">
                                Övrigt
                            </th>
                        </tr>
                    </thead>

                    <tbody>

                        @foreach (var school in schools)
                        {
                            var times = school.Children.Where("date > DateTime.Now.Date").OrderBy("date");

                            foreach (var time in times)
                            {
                        <tr>
                            <td data-title="Kommun">
                                @if (!string.IsNullOrEmpty(school.kommun))
                                        {
                                        @school.kommun
                                        }
                                        else
                                        {
                                        <text>&nbsp;</text>
                                        }
                            </td>
                            <td data-title="Skola">
                                @if (!string.IsNullOrEmpty(school.Name))
                                        {
                                        @school.Name
                                        }
                                        else
                                        {
                                        <text>&nbsp;</text>
                                        }
                            </td>
                            <td data-title="Datum">
                                @if (time.date != null)
                                        {
                                        @time.date.ToString("yyyy-MM-dd")
                                        }
                                        else
                                        {
                                        <text>&nbsp;</text>
                                        }
                            </td>
                            <td data-title="Tid">
                                @if (!string.IsNullOrEmpty(time.time))
                                        {
                                        @time.time
                                        }
                                        else
                                        {
                                        <text>&nbsp;</text>
                                        }
                            </td>
                            <td data-title="Adress">
                                @if (!string.IsNullOrEmpty(school.adress))
                                        {
                                        @school.adress
                                        }
                                        else
                                        {
                                        <text>&nbsp;</text>
                                        }
                            </td>
                            <td data-title="Övrigt">
                                @if (!string.IsNullOrEmpty(school.oevrigt.ToString()))
                                {
                                    @school.oevrigt
                                }
                                else
                                {
                                    <text>&nbsp;</text>
                                }
                            </td>

                        </tr>
                            }
                        }

                    </tbody>
                </table>