javascript - 让输入过滤所有列

Question

我刚刚设法让这个表过滤器正常工作，但到目前为止它只过滤一列(硬编码的一列)。我想防止硬编码并使过滤器同时在所有列上工作。谁能帮我让它发挥作用吗？

我尝试使用双 forloop 来循环遍历所有 6 列，但这似乎不起作用。

<小时/>

JQuery

$(document).ready(function () {
            $('#myInput').keyup(function() {
                // Declare variables 
                var input, filter, table, tr, td, i;
                input = document.getElementById("myInput");
                filter = input.value.toUpperCase();
                table = document.getElementById("myTable");
                tr = table.getElementsByTagName("tr");

                // Loop through all table rows, and hide those who don't match the search query
                for (i = 0; i < tr.length; i++) {
                    td = tr[i].getElementsByTagName("td")[6]; // This is the hardcoded column

                    if (td) {
                        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                            tr[i].style.display = "";
                        } else {
                            tr[i].style.display = "none";
                        }
                    }
                }
            });
    });

<小时/>

HTML:

<table id="myTable">
<tr class="header">
    <th>Id</th>
    <th>Activity Name</th>
    <th>Description</th>
    <th>Capacity</th>
    <th>Start Time</th>
    <th>End Time</th>
    <th>Main Event</th>
    <th>Location</th>
    <th>Price</th>
    <th> </th>
    <th> </th>
</tr>

@foreach (Activity a in Model.ActivitiesList)
{
    if (a != null)
    {
        <tr>
            <td>@a.Id</td>
            <td>@a.Name</td>
            <td>@a.Description</td>
            <td>@a.Capacity</td>
            <td>@a.StartTime</td>
            <td>@a.EndTime</td>
            <td>@Model.GetSubjectById(a.SubjectId)</td>
            <td>@Model.GetLocationById(a.LocationId)</td>
            <td>@a.Price</td>
            <td>
                @Html.ActionLink(linkText: "Edit",
             actionName: "EditEvent",
             controllerName: "Dashboard",
             routeValues: new { id = a.Id, subjectId = a.SubjectId },
             htmlAttributes: new { @class = "icon-1 info-tooltip", @Title = "Edit" })
            </td>

            <td>
                @Html.ActionLink(
               "Remove",
               "RemoveEvent",
               new { id = a.Id, subjectId = a.SubjectId },
               new { onclick = "return confirm('Are you sure you wish to delete this activity?');" }
             )
            </td>
    </tr>
    }
    else
    {
        continue;
    }

}

Answer 1

您绝对应该考虑 jqGrid 或数据表(如评论中建议的那样)，但由于您已经使用了 jQuery，对于您当前的代码，这应该可以工作:

// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
    var foundCells = $(tr[i]).find("td:contains(" + filter + ")");
    if (foundCells.length == 0) {
        $(tr[i]).hide();
    } else {
        $(tr[i]).show();
    }
}

请注意，这会进行区分大小写的搜索。如果您需要不区分大小写，请查看this answer关于如何使 :contains 不区分大小写。