Question

我正在尝试使用jquery执行实时表搜索。出于某种原因，我无法让它工作，即使是工作教程中的复制粘贴也无法正常工作。

这是我的代码：

    <input type="text" id="search" placeholder="Live search" />

    <table class="table">
<tr>
    <th>    @Html.DisplayNameFor(model => model.Id)             </th>
    <th>    @Html.DisplayNameFor(model => model.Name)           </th>
    <th>    @Html.DisplayNameFor(model => model.Amount)         </th>
    <th>    @Html.DisplayNameFor(model => model.Price)          </th>
    <th>    @Html.DisplayNameFor(model => model.Catagory.Name)  </th>
    <th>    @Html.DisplayNameFor(model => model.Supplier.Name)  </th>
    <th>
</tr>

    @foreach (var item in Model) {
<tr>
    <td>    @Html.DisplayFor(modelItem => item.Id)              </td>
    <td>    @Html.DisplayFor(modelItem => item.Name)            </td>
    <td>    @Html.DisplayFor(modelItem => item.Amount)          </td>
    <td>    @Html.DisplayFor(modelItem => item.Price)           </td>
    <td>    @Html.DisplayFor(modelItem => item.Catagory.Name)   </td>
    <td>    @Html.DisplayFor(modelItem => item.Supplier.Name)   </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
        @Html.ActionLink("Details", "Details", new { id=item.Id }) |
        @Html.ActionLink("Delete", "Delete", new { id=item.Id })
    </td>
</tr>
    }

剧本：

     <script src="jquery-1.10.2">
$("#search").on("keyup", function () {
    var value = $(this).val();

    $("table tr").each(function (index) {
        if (index !== 0) {

            $row = $(this);

            var name = $row.find("td:second").text();

            if (name.indexOf(value) !== 0) {
                $row.hide();
            }
            else {
                $row.show();
            }
        }
    });
});
    </script>

我将不胜感激任何帮助！感谢名单！

Answer 1

问题在于您的伪选择器("td:second")。尝试将其更改为"td:nth-child(2)"。

这是完整的JS：

$("#search").on("keyup", function () {
    var value = $(this).val();

    $("table tr").each(function (index) {
        if (index !== 0) {

            $row = $(this);

            var name = $row.find("td:nth-child(2)").text();

            if (name.indexOf(value) < 0) {
                $row.hide();
            }
            else {
                $row.show();
            }
        }
    });
});

这是一个删除MVC部分的fiddle，并显示它正常工作。

Jquery在mvc项目上实时搜索

1 个答案: