javascript - 根据数据类型过滤器(JS)在列中显示数据

Question

我有两列 datatype 和 distance 以及一些其他列

这是我的看法

<div>
<table class="table table-bordered">
    <thead>
    <tr>
        <th>Current Date Time</th>
        <th>Time Difference</th> 
        <th> GPS Date Time</th>
        <th>Data Type</th>
        <th>Address</th>
        <th>Distance</th>
    </tr>
    </thead>
    <tbody id="tbody">
    @foreach (var data in Model)
    {
        <tr>
            <td>@data.CurrentDateTime</td>
            <td></td> 
            <td>@data.GPSDateTime</td> 
            <td>@data.Datatype</td>
            <td>@data.Address</td>
            <td>@data.Distance</td>
        </tr>
    }
    </tbody>
</table>
<br/>
@Html.PagedListPager(Model, page =>Url.Action("SecondPage",new {page,pageSize = Model.PageSize}))

我需要根据数据类型 1 或 2(某种过滤器)在表中显示值。

例如，如果我选择 1 ，我将仅看到数据类型为 1 的内容，如果 2 仅当数据类型为 2 时

这里是一些数据

我如何通过 JS 执行此操作？

Answer 1

尝试添加一个文本字段:

<input type="text" id="textToFind">
<button id="FilterButt">Filter</button>

然后，像这样使用 jQuery trim 方法:

$('#FilterButt').on('click', function () {
    var textToFind = $("#textToFind").val();
    var $rowsNo = $('#mytable tbody tr').filter(function () {
        return $.trim($(this).find('td').eq(3).text()) != textToFind 
    }).toggle();
});
#The eq(3) will search in the 4th column of the table witch is "datatype" column

这是一个jsFiddle