Question

我正在尝试执行以下效果，行已经存在于页面上，所以我想是关于jquery语法的东西，但我对jquery还不是很聪明，但是。

http://kobikobi.wordpress.com/2008/09/15/using-jquery-to-filter-table-rows/

它只是不起作用，是的，包含了jquery库。

Filter: <input type="text" id="FilterTextBox" name="FilterTextBox" />
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        //add index column with all content.
        $(".filterable tr:has(td)").each(function () {
            var t = $(this).text().toLowerCase(); //all row text
            $("<td class='indexColumn'></td>")
    .hide().text(t).appendTo(this);
        }); //each tr
        $("#FilterTextBox").keyup(function () {
            var s = $(this).val().toLowerCase().split(" ");
            //show all rows.
            $(".filterable tr:hidden").show();
            $.each(s, function () {
                $(".filterable tr:visible .indexColumn:not(:contains('"
          + this + "'))").parent().hide();
            }); //each
        }); //key up.
    }); //document.ready

</script>


<table class="filterable">
    <tr>
        <th>
            name
        </th>
        <th>
            yearsExperienceRequired
        </th>
        <th>
            Actions
        </th>
          <th>
            Index Column
        </th>
    </tr>

@foreach (var item in Model) {
    <tr class="indexColumn">
        <td>
            @Html.DisplayFor(modelItem => item.name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.yearsExperienceRequired)
        </td>
         <td>
            @Html.DisplayFor(modelItem => item.name)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.PositionID }) |
            @Html.ActionLink("Details", "Details", new { id = item.PositionID }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.PositionID })
        </td>
    </tr>
}

</table>

生成的HTML是以下内容，

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>Index</title>

    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />



</head>

<body>

    <div class="page">

        <header>

            <div id="title">

                <h1>Eva 1.0</h1>

            </div>

            <div id="logindisplay">

                    Welcome <strong>eva</strong>!

    [ <a href="/Account/Register">Register New User</a> ]

    [ <a href="/Account/LogOff">Log Off</a> ]

    [ <a href="/Account/ChangePassword">Change Password</a> ]





            </div>



            <nav>

                <ul id="menu">                    

                        <li> <a href="/">DashBoard</a></li>                        

                        <li> <a href="/Position">Positions</a> </li>

                        <li> <a href="/UserPositionPosition/Position">Prospects</a> </li>

                        <li> <a href="/UserPositionPosition/Position">Prospect History</a> </li>

                        <li> <a href="/UserPositionPosition/Position">Technical Interview</a> </li> 

                        <li> <a href="/UserPositionPosition/Position">Manager Interview</a> </li> 

                        <li> <a href="/UserPositionPosition/Position">Current Employees</a> </li>

                        <li> <a href="/UserPositionPosition/Position">Current Employees History</a> </li>

                </ul>

            </nav>

        </header>

        <section id="main">









<h2>Index</h2>



<p>

    <a href="/Position/Create">Create New</a>  



</p>



Filter: <input type="text" id="FilterTextBox" name="FilterTextBox" />

<script language="javascript" type="text/javascript">

    $(document).ready(function () {

        //add index column with all content.

        $(".filterable tr:has(td)").each(function () {

            var t = $(this).text().toLowerCase(); //all row text

            $("<td class='indexColumn'></td>").hide().text(t).appendTo(this);

        }); //each tr

        $("#FilterTextBox").keyup(function () {

            var s = $(this).val().toLowerCase().split(" ");

            //show all rows.

            $(".filterable tr:hidden").show();

            $.each(s, function () {

                $(".filterable tr:visible .indexColumn:not(:contains('"+ this + "'))").parent().hide();

            }); //each

        }); //key up.

    }); //document.ready


</script>





<table class="filterable">

    <tr>

        <th>

            name

        </th>

        <th>

            Years of Experience Required

        </th>

        <th>

            Index Column

        </th>

        <th>

            Actions

        </th>

    </tr>



    <tr class="indexColumn">

        <td>

            .net developer

        </td>

        <td>

            5

        </td>

         <td>

            .net developer

        </td>

        <td>

            <a href="/Position/Edit/1">Edit</a> |

            <a href="/Position/Details/1">Details</a> |

            <a href="/Position/Delete/1">Delete</a>

        </td>

    </tr>

    <tr class="indexColumn">

        <td>

            java developer

        </td>

        <td>

            5

        </td>

         <td>

            java developer

        </td>

        <td>

            <a href="/Position/Edit/2">Edit</a> |

            <a href="/Position/Details/2">Details</a> |

            <a href="/Position/Delete/2">Delete</a>

        </td>

    </tr>



</table>



        </section>

        <footer>

        </footer>

    </div>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js" type="text/javascript"></script>





    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>

    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>



</body>

</html>

Answer 1

当我在JS bin中测试你的代码时，一切正常。

http://jsbin.com/ipobiz

您可以在右上角进行编辑。

他确实对你的

中的换行提出了警告

$(".filterable tr:visible .indexColumn:not(:contains('" 
          + this + "'))").parent().hide();

但是，这可能是因为我刚从这里复制粘贴代码。

可能的修复

您之前的javascript文件可能会被缓存。尝试使用CTRL + F5对所有内容进行全面刷新。
尝试将您的代码与您的视图分开并再次尝试，因为这似乎在这里工作得很好。
在此功能中添加alert(t);或console(t);：

这将显示放入IndexColumn的值。如果他没有显示你的任何值，那么你的jquery中的每一个都有问题。

$(".filterable tr:has(td)").each(function () { 
            var t = $(this).text().toLowerCase(); //all row text 
            //alert(t); or console(t); here
            $("<td class='indexColumn'></td>") 
    .hide().text(t).appendTo(this); 
        });

根据搜索文本框显示/隐藏行

1 个答案: